In some situations, designers may choose to lessen the visual appearance of links on a page by using shorter, repeated link text such as "read more".
These types of non-descriptive links are not helpful to screen reader users.
...
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.
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 id="p123" href="news.html" aria-labelledby="p123 headline">Learn more</a></p> |
This would be announced by the screen reader as "Learn more Mayor Breed's 2023 Budget Proposal".
...