Screen reader users frequently navigate web pages, using the TAB key on the keyboard, through actionable items such as links, buttons and form controls.
...
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.
Use of 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.
The aria-label will be announced by the screen reader instead of the default link label.
You could make the aria-label:
a) the same as the preceding heading
b) append the preceding heading to the default link text/label, OR
c) create a completely new and descriptive text label
Example:
| Code Block |
|---|
<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>
|
Use of 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.
...
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, OR
c) create a completely new label that
c)
Example:
...
Keeping Speech to Input Users in Mind When Using Aria-Label Attributes
...