Creating Usable and Accessible “Read More” Links

The Problem

You often see “more” or “read more” links at the bottom of truncated articles, especially on blog and news sites. “Read more” links allow you to shorten articles on your home page so that you can get more of your content into a finite space, but they create usability and accessibility problems.

Take the example of a user with impaired vision. Screen reading software allows you to skip from link to link throughout a page. Skimming the page in this manor, however, presents the text of the links out of context. Skipping from “read more” to “read more” to “read more” isn’t very helpful. Read more what? A sighted person can easily deduce the context by looking at the associated heading, but a person using a screen reader obviously can’t deduce context from the visual proximity to headings.

The (a) Solution

You could solve this problem by reiterating the article title in the link. (e.g. “Read more about Creating Usable and Accessible Links”). But that’s not very concise and actually hurts the “scannability” of the page for visual users. It also seems unnecessarily repetitive. So how can you create “read more” links that work for everyone? A number of solutions exist, but I like how Information Architects handles it.

On iA’s site, they solve the problem by including the article title in the link, but then hiding it from visual users using CSS. Using this technique, the link appears as “read more”, but the actual text in the page (and what screen readers will read) is “read more about title of article”. Here’s how to do it.

Wrap the article title part of the link in a span element, and give it a class name of “implied”.

<a href="giant_squid.html">
  read more<span class="implied"> about giant squid</span>
</a>

Now a couple of simple CSS rules will hide it from view for visual users.

.implied {
  clip:rect(1px 1px 1px 1px);
  position: absolute !important;
}

The clip style effectively hides the entire span element, and because clip styles can only be applied to absolutely positioned elements, position:absolute and the !important declaration must be added.

Now we have links that are concise and meaningful for visual and non-visual users alike. Finally, you can get a good night’s sleep!

Check out the source code to informationarchitects.jp/en/ and their CSS.


Update: It seems that Internet Explorer—up to and including version 8—doesn’t recognize the preferred, comma separated, syntax for rect(). They do recognize the space separated version, however. In order for it to work in older versions of IE, go with the space separated version: clip:rect( 1px 1px 1px 1px);.

The example above has been updated.

comments powered by Disqus