Constructing More Links

Filed under:

What is the best way to construct a “Read more” link?

Site news, blogs, article archives. These are all examples of situations in which it is common to publish a small text extract (or “teaser”) from a piece of content followed by a link to the full, uncut, version. The problem we have, from an accessibility point of view, is that we need to avoid repetive link text. The common solution, as suggested by WCAG 1.0, is to use the title attribute to distinguish the links.

So it is suggested that we should markup each link using:

<a href="foo.php" title="Article Title">Read more …</a>

to produce:

JAWS, Verbosity and Title

JAWS has a number of Verbosity Options and may be configured so that the title attribute will not be rendered. Even if the user configures their software to “speak” the title attribute initially, there’s good chance they’ll switch it back off again, longer term. Many designers over-use this attribute for search engine optimisation (SEO) purposes. Or the title attribute value may simply repeat the link text because the developers doesn’t appreciate the implications for screen reader users.

If the core page content can be classed as “signal”, then this over-use of the title attribute is just pure “noise” which actively interferes with a screen reader user’s ability to extract meaningful “signal” from the page.

The Context Says It All

Can you assume that that a “Read more” link will always be read in context — i.e. immediately after the post extract that it relates to?

Definitely not!

Screen reader users don’t start at the top of a page and read everything from top-to-bottom. Like sighted users, they may jump around the page - often using headings and links to extract key information from a page in the same way that others visually scan a page.

JAWS certainly has a number of features to assist primary page navigation - one of which is an option to list all of the links on a page. So your “Read more” links may be read completely out of context, by some users, as part of a long list of all of the links on a page.

So we need to ensure that any important information isn’t hidden away in the title attribute but is part of the visiible link. Taking this into account, we would now markup our link using:

<a href="foo.php">Read more about Article Title …</a>

which will give us:

Repetition

Try to imagine someone reading a list out to you where every item started with “Read more about…”. After a couple of these, you’d start to get annoyed and frustrated with the repetition and probably ask the speaker to skip the “Read more about…” bits and just tell you the unique part.

When we read a similar list of links ourselves, we unconsciously filter out the repetitive parts and focus on the unique text. According to feedback I’ve received from experienced screen reader users, they would also like to able to filter out repetition on any page on which there were a number of similar links.

Screen reader users can’t actually “skip” any part of the link text. They either get the whole thing or nothing. If the link text starts with a repetitive phrase, they have to listen to the whole phrase. Why? Because it is very difficult to switch conscious listening “on” part way through a phrase without running the risk of missing something important.

However, if we alter the phrasing of our link so that it starts with unique words/phrases, they can manage the audio equivalent of filtering out the repetitive latter part and then switch their listening back “on” again when the next list item is announced by their software (usually using an audio cue or keyword).

Put Your Best Foot Forward

On the Web, text is to information as feet are to walking. So it makes sense to always put your “best” information first. In doing so, we alter the phrasing of our almost identical links so that screen reader users now have an opportunity to filter the output in a similar manner to the way that sighted people scan text.

Suggested Markup

<a href="foo.php">Article Title: continue reading …</a>

producing:

Article Title: continue reading …

The same approach should be used whenever you create a list of links to very similar resources. For example, instead of:

try:

I think this approach both avoids over-reliance on the title attribute and solves the “filtering repetition” issue. So, all in all, I think it’s a solution that doesn’t have any negative impact but offers distinct benefits for some user groups.

Top

Spider Trax