Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

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>

...