Versions Compared

Key

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

...

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 mayor's state of the city address">Learn more</a></p>

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.

...