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 the above example the screen reader will announce the Learn more link as “Learn more about the mayor’s state of the city address”.

...

You can also use the aria-labelledby attribute to associate the non-descriptive link text/button label ("Learn more..." "More..." "See more", etc) with the preceding heading.

...

The aria-labelledby attribute will be announced by the screen reader instead of the default link text/button label.

The aria-labelledby attribute will automatically append the preceding heading to the default link text/button label.

Example:

...

<h1 id="title" 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 state of the city address”.

Keeping Speech to Input Users in Mind When Using

...

ARIA Label Attributes

About Speech to Input Users

Speech to input users are unable to type and use speech recognition software to interact with online content.

Speech input software allows users to interact with devices using voice commands. They can covert speech into text or execute a wide range of tasks via vocal instructions.

How the Use of ARIA Label Attributes Impact Speech to Input Users

From a speech to input user perspective it would be good practice to include the default link text/button label at the beginning of the aria-label.

...