Links

Here is the recommended native HTML pattern to code links:

<a href=/schedule>View event schedule</a>

Here is the not recommended HTML pattern, with non-semantic <div> element which makes the link unusable for keyboard and screen reader users:

<div onclick=location.href=’/schedule’”>View event schedule</div>

The above example is not recommended as:

• Not keyboard focusable - it uses the generic <div> element  which can not receive the keyboard focus via the Tab key, therefore keyboard only users will not be able to navigate with this element.
• Role missing – <div> element is announced by screen readers as static text, failing to convey to screen reader users that it acts as a link.
• No keyboard activation – the inline ‘onclick’ event handler is triggered only when the mouse is clicked (or when Enter key is pressed, if it has focus), which means there are no standard handlers for key press (Enter/spacebar) that are expected from custom interactive controls.
• Disrupts native browser behaviour – using JavaScript code for navigation instead of proper links interferes with standard browser functions, such as copying the link address, opening in a new tab or previewing the destination URL in the browser status bar.

Icon-only and image-only links

Links that include only an icon like social media logotypes, “Back to top of page” icon or image like brand logotype navigating to the website homepage, must also provide an accessible text,  so screen reader users and speech recognition software can understand their purpose.

You may use the following techniques to ensure the programmatic accessible name for non-text links:

Aria-label technique (icon-only elements)

Apply aria-label attribute directly to the <a> tag for inline SVG elements or icon fonts.

The aria-label attribute will replace the text content inside <a> tag for screen readers.
 

Sample HTML code:

<a href=”/settings” aria-label=”Settings” class=”icon-link”>
    <svg aria-hidden=”true” focusable=”false">
    </svg>
</a>

Alt text technique (image-only elements)

Enclose an <img>  element in an anchor element, and add alt attribute to that <a>  element.

alt text must describe the links’s destination or action (it’s functional purpose) and it will serve as the accessible name for the entire link.

Sample HTML code:

<a href=”/home”;">
    <img src=”logo.svg” alt=”W3C home;">
    </img>
</a>

Visually hidden text technique

Add CSS utility class .visually-hidden to website stylesheet.

This class will shrink the text down to invisible 1-pixel wide box, remove margins and borders and exclude it from the visual layout of the page. At the same time it will remain accessible to assistive technologies.

Place a <span> tag containing the links functional destination inside the anchor tag <a>, positioned alongside the icon element, and add the class=”visually-hidden” inside the opening <span> tag.

To prevent screen reader from announcing the icon path details (as the icon has decorative function), add aria-hidden=”true” and focusable=”false” to nested child SVG element.

Sample HTML code:

<a href=”/cart” class=”cart-link”>
    <svg aria-hidden=”true” focusable=”false"></svg>
    <span class="visually-hidden">
    </span>
</a>

Sample CSS code: