[A11Y] Repetitive 'read more' links are not optimal for screen reader experience and provide little to no context.

[jenlampton]

6. Repetitive 'read more' links are not optimal for screen reader experience and provide little to no context.

Description of Issue: Do not use repetitive link text such as "read more." Screen reader users can scan through the content of the page by pulling up a list of links on the page. If the links only say "read more" but lead to different places, this does not help them to scan the content and learn where they can go. Please either delete "read more" links or add further descriptive text such as "read more about x article title." See solution area below.
URL: https://pr3750-llnmetezlaix5oe10ddq5m3nya7zdz2b.tugboat.qa/
Testing Environment/Browser: Windows Lenovo PC, Windows 10 Pro, Chrome Browser v. 94.0.4606.61, JAWS 2020.12.13
Severity: P2
Solution: One solution is to delete the "read more" links in favor of just utilizing the already linked headings which are far more descriptive. This also simplifies code and the visual design.

Alternatively, you can add visually hidden text with further context to the "read more" link are like so with the element-invisible class that has special styling appended to it to make it hidden from sighted users, but still readable to screen readers.

<a href="#">
   Read more
   <span class="element-invisible">about {X title of article}</span>
</a>

Screenshot:

[klonos]

I think I like the approach with the addition of the element-invisible span 👍🏼