New Components

Links

Links are interactive elements in a user interface that allow users to navigate between different web pages or sections of content by clicking on them. These elements are fundamental to web navigation and are used to connect and reference various online resources.

Links can be text-based or represented as buttons or icons, and they are typically styled to stand out from regular text to indicate their interactive nature. When users click on a link, it takes them to a different location, such as another web page, document, or specific section within the current page.

When to Use

  • Navigation: Use links primarily for navigation purposes, connecting to other web pages or resources.
  • External Navigation: Use links when directing users to external pages, especially if the navigation involves opening a new tab or window.

When Not to Use

  • Non-Navigational Actions: Avoid using links for actions that are not related to navigation, such as submitting forms or triggering pop-ups. In these cases, use buttons instead.
  • Ambiguous Purposes: Do not use links when the destination or action is not clear or when it could lead to confusion about its function.

Behaviors

  • Mouse Interaction: Links should change visually on hover (e.g., underlining or color change) to indicate they are clickable.
  • Keyboard Navigation: Ensure links are accessible via keyboard, typically navigable using the Tab key and activated by the Enter key.
  • Screen Reader Accessibility: Links should be properly labeled and structured for screen readers, providing clear context about their destination or function.

Content

  • Concise Labeling: Aim for link labels to be three words or fewer, ensuring brevity while maintaining clarity.
  • Accurate Reflection of Destination: The labels of links should precisely indicate the content users will encounter upon following the link. Avoid using vague terms like “click here” or the URL itself as the link text.
  • Meaningful and Clear Labels: Craft link labels that are meaningful and easily understood, providing clear context about their destination or function.
  • Length Considerations: Ensure link text is succinct enough to avoid wrapping to the next line, especially when used within a sentence or paragraph.

On this page

The link should serve as a means of navigation. For any other types of actions, the button component from the Design System should be used. It's essential for a link to always contain a textual title within the <a> tags.

Keywords

  • Link: A clickable connection to another web page or resource.

Breakdown of Components

Text Links

  • The visual title of a link should be explicit enough to enable users to grasp its destination merely by reading it. Avoid using titles like "click here" or "go" as they don't clearly indicate the link's destination. Opt for more informative titles such as "click here to view our gallery" or simply "our gallery."
  • Text links should be easily distinguishable, and relying solely on color for distinction is not enough for accessibility. To enhance link identification, it is recommended to incorporate additional visual cues such as underlining or bolding. This strategy is particularly beneficial for users with visual impairments, as it facilitates the recognition of links within the text.

The most accessible solution for links is to encapsulate all necessary information within the link tag itself.

By doing so, all users can easily understand the link's destination without relying on ambiguous titles. Instead, using informative titles directly convey the link's purpose.

Links that open in a new tab or window should be explicitly indicated. This can be done in several ways:

  • The first option is to include a fully visible title that explicitly indicates the link opens in a new window. This solution is the most advantageous as it benefits all users.
  • Another approach is to incorporate an icon within the link that visually signifies the opening of a new window. This icon should have an alternative text to convey the same information for users relying on screen readers.
  • The third option can be achieved by using the aria-label attribute to describe the action, like opening in a new window.

This practice informs users beforehand that the link will open in a new tab, preventing unexpected navigation changes.

Download links have to convey detailed information about the file to be downloaded, including its name, size, and format type. Providing such details helps users to understand what they are downloading and assess its relevance to their needs.
The same three approaches, visible title, icon with alternative and aria-label can be applied to download links as well.

  • The visible title should contain the name of the file, its size, language (if different from the website), and the format. Once again, this comprehensive approach is the best solution, benefiting all users.
  • The download icon's alternative text can include all the same information as the visible title option. This ensures that screen readers vocalize the necessary details when reading the link.
  • The aria-label attribute can be used to provide all necessary information for screen readers. This attribute contains all the relevant details about the link.
  • It is recommended to avoid vague or non-specific titles for links. Titles such as "Click here," "Find out more," or "Read more" do not provide clear information about the destination or function of the link.
  • When a descriptive title cannot be provided, the aria-label attribute should be employed to provide extra context. This attribute's value should include the visible portion of the text for clearer understanding.
  • For links represented solely by icons, it is important to ensure accessibility. Icons should be tagged as aria-hidden='true' to be ignored by screen readers, and a descriptive label must be added for clarity.
  • The title of the link is provided via the aria-label attribute. Its content should be precise and describe the destination or purpose of the link accurately.
  • This approach helps users reliant on screen readers to comprehend the icon's function.
  • When using an image as a link, it is essential to include alternative text (alt) that describes the link's destination and purpose.
  • The value of the alt attribute should convey the action that will be initiated by clicking the link, aiding users who are unable to view the image.
  • Non-generic links can be created using different HTML tags, combined with WAI-ARIA attributes. This approach ensures the link appears and functions as one, both visually and for assistive technologies like screen readers.
  • The role="link" attribute is key in these scenarios, signaling the element's function as a link.
  • The tabindex="0" attribute is included in the tag to ensure its accessibility through keyboard navigation.
  • Despite the effectiveness of this method, it's generally advised to use the <a> tag for link creation. This recommendation stems from potential issues with browser support for ARIA attributes.

On this page

Accordion keyboard navigation function table
Key Function
Enter Activates the link and moves the focus to the link target.
Tab/ Space When the element doesn't have focus, the focus moves to the link.
Shift + F10 Opens a context menu for the link.