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>

...

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.

...