Theme colour switcher

"Learn more" or "read more" links: bad news for accessibility

A very common website pattern is a list of teasers for blog posts or articles, each with a heading, short text extract, maybe an image, and a link whose text label is something like "Read more" or "Learn more".

Those "read more" links are very bad news for accessibility, mainly for blind users.

Why? Blind users often hear links out of context. This may happen by tabbing through focusable elements on the page, or using screen reader functionality to pull up a list of only the links on a page.

With no context, it is impossible to tell where a link called "learn more" will take you.

Not only can you not tell where any individual link will take you, you cannot tell these links apart. All of them go to different destinations, but it's impossible to tell which is which.

This is different from the experience of a sighted user, who can gather from the visual styling and proximity of the link to other text, such as the title of a blog post, where it will probably go. Blind users have none of these visual clues.

How to fix this?

Solution 1: add visually-hidden text

I tend to use a technique which involves adding a span with a visually-hidden CSS class to the link text with additional wording. It would look something like this:

<a href="/some/url">Read more<span class="visually-hidden">&nbsp;about the unbearable lightness of being</span></a>

Solution 2: aria-label

You can also use aria-label, but you must keep in mind that screen readers speak aria-label instead of the visible link text, so the entire text must be contained in the aria-label:

<a href="/some/url" aria-label="Read more about the unbearable lightness of being">Read more</a>

These techniques both work for blind users, although hearing "learn more" "learn more" "learn more" is still tedious.

Voice input users

But these techniques don't take another group of assistive technology users into account; that is, people who use voice control software to speak commands. For example, to follow a link, Dragon users say "Click [link label]".

They cannot speak a part of the link label they cannot see, as is the case if it is provided by visually-hidden text or aria-label (and Dragon does not recognize aria-label even if you know what its text says). If you tell Dragon to click link text which occurs multiple times on a page, it will assign numbers to each duplicate and you then say "Choose [number]" to select the one you want. That's not terrible, but it requires the user to perform an additional action.

Ideal solution: understandable link text for all

The best solution if you are not in a situation where a designer or client is insisting on "read more" links, is not to use them at all. Make the visible text of all links unique, complete, descriptive of their destination, and fully understandable out of context. This makes them more understandable for all users, especially those with memory or cognitive issues.

<a href="/some/url">Read more about the unbearable lightness of being</a>

Or better, leave out the meaningless "read more" or "learn more" wording:

<a href="/some/url">The unbearable lightness of being</a>

Designers will predictably object to this, because the titles of some content can be very very long, and it messes up their nice, neat, identical-size, beautifully-styled links.

But does the design really need "read more" links? Why not just make the title already present in the teaser a link to the content, and be done with it? Titles normally perfectly describe the link destination.

Make sure you visually style the title so it's clear that it is a link. Sorry, that usually means underlines (at minimum on hover and focus, but recommended as the default style).

Tags:

Add new comment

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.