...
<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>
| 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>
|
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.
...
This would be announced by the screen reader as "Learn more Mayor Breed's 2023 Budget Proposal".
<h2 id="attr" class="article-title">13 ARIA attributes you need to know</h2>
<p>
There are over 50 ARIA states and properties, but 13 of them stand out…
<a href="13.html" id="rm13" aria-labelledby="rm13 attr">read more</a>
</p>
Keeping Speech to Input Users in Mind When Using Aria-Label Attributes
...