Versions Compared

Key

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

...

<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

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.

...