...
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 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.
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: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>
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> |
...