...
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 text of the heading of the preceding section.
The aria-labelledby attribute is not visible to a sighted user.
The aria-labelledby will be announced by the screen reader instead of the default link 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> |
...