Links

• Links SHOULD be defined using <a> element.
• Links should be navigable and operable through both the mouse and the keyboard.

Though ARIA CAN be used as an alternative, it is advisable to use correct semantic HTML element since native elements have built-in keyboard accessibility, roles and states.

• Links CAN be defined using role="link" and tabindex="0" attribute on the neutral containers such as <div>, <span> and so on.
• Appropriate JavaScript event handlers MUST be used to make them.

• Displaying new tabs or windows without warning can be confusing to non-sighted, mobile, and screen reader users. Mobile devices give little indication a new tab or window has opened. Opening a new window or new tab can cause confusion for users who may not notice that this has happened.
• Notify the user when links will open in new tabs or windows.
  • Avoid specifying a new window as the target of a link with target="_blank".
  • If you cannot avoid displaying a new window, insert a warning into the link text like the following: "opens in a new window".

• The link text SHOULD be descriptive and unique to convey the purpose of the link.
• Alternatively, the aria-label attribute CAN be used to provide a descriptive and unique accessible name.
• An off-screen text CAN be provided to make the accessible name descriptive and unique.
  • CSS can be used to place the text off-screen. For more information on placing text off-screen, visit https://css-tricks.com/comparing-various-ways-to-hide-things-in-css/ .
• The accessible name SHOULD contain the visual text if available for the link.
  Note: If there is no visual label provided for the link, the accessible name can be provided as per the purpose.
• If an image is used to identify the link, then a textual description MUST be defined for the image link.
  • If the image is defined using <img> element, use an alt attribute with descriptive value.
  • If the image is defined using <svg> element, use role="img" and aria-label attribute to provide a role and an accessible name for the element.
    Note: Providing ARIA based role and attribute on SVG image ensures robust support across different environments.

• The links that open content from a different website are called external links.
• href attribute SHOULD contain the URL of the target page.
• Descriptive link text SHOULD be given to the external links so that screen reader users should be aware of it opening in a new window or tab.
• If the language of the new page is different from the current page, the target page’s language should be specified with the hreflang attribute. For more information see the Language component.
• The accessible name SHOULD consist of keyword such as “opens in a new window”.

Example,

<a href="#">Visit our legal offerings
    <span class=”visually_hidden”>opens in a new window</span>
</a>

• Link text SHOULD clearly describe the purpose of the link. It helps screen reader users to understand the purpose of the link.
• Indeterminate link text such as “Learn More”, “Click Here”, “Get started”, and so on SHOULD NOT be given for the links as these do not explain the destination page it points to.
• Link text CAN be made descriptive through one of the following.
  • A hidden off-screen text describing the purpose of the link.
  • Making the link text itself descriptive.
  • aria-labelledby attribute CAN be used to associate the visual text with the link by referencing the id attribute of visual text container or visually hidden text container and the link itself.
  • Concatenation of multiple pieces of text to form a name is possible through this attribute by referencing the respective id attribute values.
  • When using concatenation, the order of the id attribute value is important.
  • id attribute values SHOULD be present in the same HTML document.
  • It CAN be specified in case of design constraint as well wherein an additional visual text cannot be added for the link.

    Example,

    <h2 id="org">Organization</h2>
    ...
    <a id="primary" href="#" aria-labelledby="primary org">Explore More</a>
    

    Note: If both link text and aria-labelledby or aria-label and aria-labelledby or link text, aria-label and aria-labelledby are present, the aria-labelledby will take precedence to convey the accessible name of the link.

  • aria-label attribute CAN be used to define a label for the link that does not have supporting visual label.
  • It’s a challenge for internationalization because its value will not get translated and will require manual updating.
  • It’s also a challenge for providing name wherein the name MUST be updated as these are hardcoded values.
  • It’s not visible on-screen so ONLY helps assistive technology users such as screen reader users.

    Example,

    <a href="#" aria-label="Explore more about organization">Explore More</a>
    

  • aria-describedby attribute CAN be used to associate the additional information with the respective button by referencing the id attribute of visual text container or visually hidden instruction text container.
  • This attribute MUST NOT be used as a sole method for naming the link.

    Example,

    <h2 id="org">Organization</h2>
    ...
    <a href="#" id="primary" aria-describedby="primary org">Explore More</a>
    

• Link text SHOULD NOT contain role information such as “link”, “icon” and so on as a part of it so that screen reader users do not have to listen to redundant information.
• The text “Opens in a new window” CAN be given as a part of the link text.

• Links given within paragraphs CANNOT be identified as links by low vision and color-blind users.
• Only color MUST not be used to distinguish the links from the surrounding text of the paragraph in which the link is present.
• The foreground color of link text SHOULD meet the color contrast ratio requirement of 3:1 with the surrounding text color.
• In addition to this, a visual cue like underline, bold formatting, or icons CAN be used to help distinguish the links from the surrounding text.