When there are a bunch of “read more” links on a page, it is usually
fairly obvious from visual cues what the “read more” refers to.
However, when screen reader users encounter a bunch of “read more”
links on a page, it is not always obvious which part of the page each
“read more” link refers to. A simple solution is to use a bit more
descriptive text than simply “read more” and use CSS to hide the
additional text. In this example the following code is used.
<p><a href="#">Read more <span class="offscreen">About NC State</span></a></p>
This is the CSS rule.
.offscreen { position:absolute; left:-999px; width:1px; height:1px; top:auto; }
Notes:
- The off-screen text needs to be included in the <a> as well, otherwise it won’t be read correctly by screen readers.
- You cannot use the CSS rule display:none or visibility:hidden as that will make the content invisible to screen reader users.
- This code is not unique to me. It is the compilation of different examples I have seen in various accessibility forum posts. I just want to put this example in writing for others.