...
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> |
...