How to make hidden link text in (X)HTML

This describes how to make hidden link text:

Example 1 below looks like this:

Washington has announced plans to stimulate economic growth. Full StoryHidden Information

Example 2 below looks like this:

Winnie the Pooh HTMLWhinnie the Pooh   PDFWinnie the Pooh
War and Peace HTMLWar and Peace   PDFWar and Peace

Technique Name

Creating hindden link text to describe the link's destination.

Status

Proposed sufficient technique to meet SC 2.4.5

Applicability

For use in (X)HTML, when it is desired to create short undescriptive link text such as "click here" or "read more."

Description

People who use screen readers often navigate by tabbing from link to link or by calling up a dialogue box that contains the links on a delivery unit. If a description of the destination of the link is included in the link text, the screen reader user will be able to quickly identify the destination of the link without scrolling around the link to find text describing its destination. However, sometimes a web author may have good reasons to use undescriptive link text such as "click here" or "read more." One good way to do this while providing meaningful text is to create hidden link text which is unseen on the delivery unit but that a screen reader will parse.

Example 1

This example describes a news site that has a series of short synopsis of stories followed by a link that says "full story". Hidden link text decribes the destination of the link.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8" />
<title>Hidden Link Text </title> </head>

<style type="text/css">
a .hide {
height: 1px;
width: 1px;
position: absolute;
overflow: hidden;
top: -10px;
}
</style>
</head>

<body>
<p>Washington has announced plans to stimulate economic growth.<a href="#"> <span class="hide">Washington stimulates economic growth </span>Full Story</a></p>
</body>
</html>

Example 2

This example describes a resource that has electronic books in different formats. The name of the title is followed by links that say "HTML" and "PDF." There is hidden text that describes the destination.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8" />
<title>Hidden Link Text </title> </head>

<style type="text/css">
a .hide {
height: 1px;
width: 1px;
position: absolute;
overflow: hidden;
top: -10px;
}
</style>
</head>

<body>
<p>Winnie the Pooh <a href="winnie_the_pooh.pdf">HTML<span class="hide">Whinnie the Pooh </span></a> &nbsp;
<a href="winnie_the_pooh.pdf"> PDF<span class="hide">Winnie the Pooh </span></a><br />
War and Peace <a href="war_and_peace.pdf">HTML<span class="hide">War and Peace</span></a> &nbsp;
<a href="war_and_peace.pdf"> PDF<span class="hide">War and Peace</span></a></p>
</body>
</html>

-----------------------------------------