Screen reader users frequently navigate web pages, using the TAB key on the keyboard, 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.
You can use the “aria-label” or “aria-labelledby” attribute to provide screen reader users with descriptive link text.
When using aria attributes for descriptive link text make sure that they are also accessible to speech to input users.
Use of aria-label
The aria-label will completely override the default link text/button label.
The aria-label is not visible to a sighted user.
The aria-label will be announced by the screen reader instead of the default link text/button label.
Example:
<h1 class="sfgov-campaign-title">State of the City Address</h1>
<p>Mayor London N. Breed delivered the State of the City Address to set forth her top priorities for 2024.</p><p><a href="" class="btn" aria-label="Learn more about the mayor's state of the city address">Learn more</a></p>
In this example the screen reader will announce the Learn more link as “Learn more about the mayor’s state of the city address”.
Use of aria-labelledby
You can also use the aria-labelledby attribute to associate the non-descriptive link label ("Learn more..." "More..." "See more", etc) with the preceding heading.
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:
<h1 id="title" class="sfgov-campaign-title">State of the City Address</h1>
<p>Mayor London N. Breed delivered the State of the City Address to set forth her top priorities for 2024.</p><p><a href="" id="linktext" class="btn" aria-labelledby="linktext title">Learn more</a></p>
In this example the screen reader will announce the Learn more link as “Learn more state of the city address”.
Keeping Speech to Input Users in Mind When Using Aria-Label Attributes
Speech to input users are unable to type and use speech recognition software to interact with online content.
Speech input software allows users to interact with devices using voice commands. They can covert speech into text or execute a wide range of tasks via vocal instructions.
From a speech to input user perspective it would be good practice to include the default link text/button label at the beginning of the aria-label.
A speech to input user can activate links on a web page by telling the software to click on links and buttons that the user sees on screen.
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.
However, if the aria-label is completely different from the default link text/button label or does not include the default link text, for example aria-label="State of the City Address", 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 link text/button label, aria-label="Learn more about the mayor's state of the city address", the speech input software will recognize the users command and activate that link.
What Elements Can Be Used With aria-label?
interactive elements: such as
a(whenhrefattribute is present),audioandvideo(whencontrolsattribute is present),input,select,button,textarea.implicit landmark elements: such as
header,footer,nav,main,aside,section, andform.explicit landmark elements: such as an element with
role="navigation".widget role elements: such as an element with
role="dialog"orrole="tooltip"(there are 27 widget roles in ARIA 1.1).iframeandimgelements.
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
Ensure that Links Appear in Context
Provide links at the point in the content at which they're useful without visibly displaying the URL.