Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 16 Next »

Screen reader users frequently navigate web pages, using the TAB key, through actionable items such as links, buttons and form controls. 

Assistive technology can provide users with a list of links on a webpage and they can navigate from this list.

In these cases the links are taken out of context from the surrounding text but should still provide the user with enough information.

The button/link text alone should convey the function and purpose of the link.

Best Practice

Best practice is to provide descriptive link text or button labels by default.

However, in situations when this is not possible the following techniques can be used.

Use aria-labelledby

To solve this issue for screen reader users you can use the aria-labelledby attribute to associate the non-descriptive link label ("Learn more..." "More..." "See more", etc) with the heading of the preceding section.

The aria-labelledby attribute is not visible to a sighted user.

The aria-labelledby attribute will be announced by the screen reader instead of the default link label.

The aria-labelledby attribute will automatically append the preceding heading to the default link text/label.

Example:

<h2 id="headline">Mayor Breed's 2023 Budget Proposal</h2>

<p>In a press conference tomorrow, Mayor London Breed will present the 2023 budget proposal
<a href="news.html" aria-labelledby="headline">Learn more</a></p>

This would be announced by the screen reader as "Learn more Mayor Breed's 2023 Budget Proposal".

Use aria-label

The aria-label attribute could also be used when applicable.

By default the aria-label attribute will completely override the button label.

The aria-label is not visible to a sighted user.

You could make the aria-label:
a) the same as the preceding heading  OR
b) append the heading to the default link text/label

Example:

<h1 class="sfgov-campaign-title">Vote by Nov 8</h1>
<div class="mb-20">
<a href="https://sfgov.org/" class="btn" aria-label="Read more about voting on November 8">Read more</a>
</div>

Keeping Speech to Input Users in Mind When Using Aria-Label Attributes

From a speech to input user perspective (users who are unable to type and use speech recognition software) it would be good practice to include the initial button label in the aria-label.

If a speech to input user want's to activate a button that says "Learn more" and an aria-label has been provided, the speech recognition software is going to respond to the aria label. So if the aria-label is completely different from the default label, for example "Information about London Breed", the speech recognition software will not recognize the users command.

The speech to input user will not know what the aria-label is as it is not visible to them. However if the aria-label starts out with the default button label, "Learn more about London Breed", the speech recognition software will be able to recognize that button label.

Ensure that Links Appear in Context

Provide links at the point in the content at which they're useful without visibly displaying the URL or "here".

What Elements Can Be Used With aria-label?

  • interactive elements: such as a (when href attribute is present),audio and video (when controls attribute is present), input, select, button, textarea.

  • implicit landmark elements: such as header, footer, nav, main, aside,section, and form.

  • explicit landmark elements: such as an element with role="navigation".

  • widget role elements: such as an element with role="dialog" or role="tooltip"(there are 27 widget roles in ARIA 1.1).

  • iframe and img elements.

If you use aria-label, aria-labelledby, or aria-describedby with any other elements (like div, span, p, blockquote, or strong etc.), they generally won’t work across all browser/assistive technology combinations.

For more information on this, and on using ARIA with HTML in general, refer to the W3C Note on Using ARIA

  • No labels