Link

Links are used to navigate to other pages or views. They can appear in-line, within a paragraph, or on their own following the related content.

Usage

Links have a navigational purpose; they should be used to take the user to a page or view. When it triggers an action (meaning the user is going to perform a specific task) use a Button instead.

 

Specifically, use a link to:

  • Navigate to a different page or view within the website or app;
  • Navigate to an external resource (read more about this in the next section);
  • Jump to another section on the same page or view (also known as an anchor link).

 

Do not use a link to:

  • Trigger an action. For example: submitting a form, cancelling a process, searching flights or content, submitting a request, saving information etc.

 

Be aware that too many links on a page will clutter it, making the page difficult to scan. The result could be that the user cannot identify where to go next, which is even more so with inline links. Therefore, try to limit the amount of links on a page and choose a standalone link over an inline link if possible.

 

Usage / Use cases - AF

 


Placement

When used inline, the link should be connected to the word or part of the sentence it applies to in order to clearly display the referral to an associated page or view.

A standalone link is placed directly below the content it applies to. Do not place it on another position on the page or view, since this would make it difficult for a user where to go next. By default it should follow the reading order, meaning it would be positioned on the left side below the content.

 

Usage / Position - AF

 


Sizing

An inline link inherits the font size of the paragraph. A standalone link is made for a specific size, which is platform dependent.

 


 

Accessibility considerations

Screen reader users are able to navigate from link to link, skipping the text in between the links. A direct result of this, is that link tet can at times be encountered without its surrounding context. This is problematic when the same link text (e.g. Learn More, Click Here, Read More, etc.) is repeated several times on the ame page. Doing this is A WCAG violation, as it results in screen reader users, speech recognition users etc. having trouble differentiating the various different links with the same link text.