Russ Weakley
20-Jul-05

The scenario: You have a series of introductory paragraphs on a page. You want to send users off to more detailed information at the end of each introductory paragraph. You could link the heading itself, but let's assume that you or the client would prefer to use a variation of a "More" link at the bottom of each paragraph.

The problem: Phrases like "more" or "find out more" are not very informative (and possibly highly irritating) for screen reader users. Having a link read out as "more" gives them no idea what they will link off to. This is even more confusing if there are numerous instances of "more" links on the page.

A solution: CSS can be used to hide the full description of the link (from CSS-supporting browsers) while allowing older devices and screen readers to receive the entire content.

Without CSS applied
Concerns over wrongful detention
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. More about Concerns over wrongful detention

With CSS applied
Concerns over wrongful detention
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. More about Concerns over wrongful detention

How can it be achieved?
One method that can be used is to wrap a span around link information content that is important to screen readers, but unimportant to CSS supporting browsers.

More<span> about Worldwide Status of Human Rights</span>

Then, CSS can be used to "hide" this content. This can be done by setting the span to "position: absolute", and then forcing it to sit off the left side of the screen using "left: -1000px". A width is then set to make sure it doesn't appear in the left side of the screen if extremely large font size is used - "width: 900px".

span
{
position: absolute;
left: -1000px;
width: 900px;
}

Why not simply use "display: none"
While using "display: none" seems simpler and easier, this method is not currently supported by many screen readers. For this reason, using absolute positioning to push the text off the screen is one preferred option.