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.
Screen reader users frequently navigate web pages, using the TAB key, through actionable items such as links, buttons and form controls.
Assistive technology can provide users with a list of links on a webpage and they can navigate from this list.
In these cases the links are taken out of context from the surrounding text but should still provide the user with enough information.
The button/link text alone should convey the function and purpose of the link.
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:
<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".
Best practice is to try and provide descriptive link/button labels by default. However, in situations when this is not possible this technique can be used.
Describe the purpose of the link to screen reader users by using either the aria-label or aria-describedby element.
The aria-label will replace the non-descriptive link, only for screen reader users.