Versions Compared

Key

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

...

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

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

Example:

Code Block
<h2 id="headline">Mayor Breed's 2023 Budget Proposal</h2>

<p>In a press conference tomorrow, Mayor London Breed will present the 2023 budget proposal
<a href="news.html" aria-labelledby="headline">Learn more</a></p>

...

The aria-label is not visible to a sighted user.

You could programmatically make the aria-label:
a) the same as the section titleĀ  preceding headingĀ  OR
b) append the section title heading to the button default link text/label

Example:

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>

...