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.
Here is an example of this code technique.
What about using the title attribute of a link? Screen readers usually never read that text so it’s not a good idea to depend on that as a solution. Ian Pouncey has a good write up about why not to use the title attribute.
So are you saying using the CSS to locate it off the screen or obscure it from view? How would either of those affect the order in which the screen reader reads it?
Screen readers will still read the text as expected in this example. The CSS simply changes where it is displayed, not the underlying semantic structure of the page. CSS alone will not change the reading order of text.
My question is why bother to hide the extra text? It would be much better to leave it visible so that when others view the “read mores” they see a better example of how to create accessible content. If they cannot at a glance see that you have included more specific text in the link, it will look exactly like all the others. Why go through so much trouble to mimic the inaccessible way of doing things?
All this behind the scenes effort will only serve to visually reinforce the current popular malpractice of using “read mores”, along with the still rampant “click heres”. There is essentially no difference between the two. Both require being read in context, or as you suggest here, having text added non-visually. The former requires extra effort for the reader, while the later requires extra knowledge/steps for the writer.
At best, all this extra effort to hide the correct way to add links makes it appear that “read mores” are somehow worth it, adding value for visual persons such as myself. I have to tell you, they do not. In fact, I often fear to click as I have no clue where I will end up once I do.
Pardon me for for being so blunt on this extremely sensitive subject, but I’ve noticed what appears to be a serious over attachment to “read more” links that is illogical, backwards, and inefficient at best. All that time and effort could be so much better spent on accessibility/usability tweaks actually worth considering, learning about, and incorporating. Thanks for “reading more”
Hi Brenda,
Thanks for your comments. I think there are some user interface changes that could be made to eliminate some use of “read more” links, like turning the heading of the section in question into a link, although I do still see a case for “read more” links at times. When the graphical presentation of content makes it obvious visually what the read more link refers to, such as more about a particular news story, putting the extended text on the screen would be a bit much for sighted users who can already see what the read more refers to.
I agree that I don’t like the use of read more links, but I tend to be a realist when it comes to dealing with these problems. Despite any argument that can be made for eliminating the read more technique, I know there will be developers who insist on using it and can make a fairly valid case for doing it, so I’d at least like them to do it in the most accessible way possible.
Perhaps my example was a bit too abbreviated to fully illustrate a better example of when to use read more links. The real point is to show a technique where you can provide an additional textual description to a link and still hide that extra description off screen. The way this usually gets handled is the extra information gets put into the title attribute of the link, which is fraught with accessibility problems. So if you don’t like to use read more links, hopefully you can find a use for this technique somewhere.