...
In this example the screen reader will announce the Learn more link as “Learn more about the mayor’s state of the city address”.
Use of aria-labelledby
To solve this issue for screen reader users you can You can also use the aria-labelledby attribute to associate the non-descriptive link label ("Learn more..." "More..." "See more", etc) with the preceding heading of the preceding section.
The aria-labelledby attribute is not visible to a sighted user.
...
The aria-labelledby attribute will automatically append the preceding heading to the default link text/label.
Example:
...
...
<h1 id="
...
title" class="sfgov-campaign-title">State of the City Address</h1>
<p>Mayor London N. Breed delivered the State of the City Address to set forth her top priorities for 2024.</p><p><a href="" id="linktext" class="btn" aria-labelledby="
...
linktext title">Learn
...
more</a></p>
...
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>
...