Read more what?
By Lis Shorten
It is quite common on many web pages to find ‘more’, ‘read more’ and ‘continue reading’ links that follow a headline or summary of an article to let users read on. The upside of this is to fit more content on the page, enabling readers to scan the headlines more quickly.
The downside to this, however, can be reduced accessibility. Blind people use screen readers to navigate a web page either by tabbing through the links one-by-one, or (if their screen reader provides the facility) by viewing a list of links either in the order that they appear on the page or alphabetically. Whichever method is used, if there are multiple ‘read more’ links on a page all linking to different web pages, it is impossible to know which one leads where. To work it out they will need to stop, backtrack, read the surrounding text, all of which can be a time-consuming and frustrating process.
If screen reader users are to read web pages quickly and efficiently they need to know from the link text alone where the link leads. This means giving the link a clear and meaningful description. However, with headlines sometimes being fairly lengthy, this could impact the usability for everyone else.
To get the right balance of usability and accessibility (something I strongly believe in) there is a solution. You can repeat the heading text after the ‘read more’ link but hide it off the screen using CSS positioning techniques. This way the scanability isn’t affected for sighted users and screen reader users have a clear and useful description of the links destination – everyone wins!
The image below show how links on our blog overview page are presented in a screen reader links list. Each link clearly describes the article users can read more about because our ‘read more’ link is followed by the article heading, e.g. ‘Read more about: Chance finds with online shopping’, instead of just ‘Read more’. The links list to the right shows how links are presented when no context is given, which isn’t very helpful.
Click on image below for a larger view.
Accessible links on Foviance website Inaccessible links on other website
