Techniques for WCAG 2.0

On this page:

-

# C7: Using CSS to hide a portion of the link text

## Applicability

All technologies that support CSS .

This technique relates to:

- Success Criterion 2.4.4 (Link Purpose (In Context))
  - How to Meet 2.4.4 (Link Purpose (In Context))
  - Understanding Success Criterion 2.4.4 (Link Purpose (In Context))
- Success Criterion 2.4.9 (Link Purpose (Link Only))
  - How to Meet 2.4.9 (Link Purpose (Link Only))
  - Understanding Success Criterion 2.4.9 (Link Purpose (Link Only))

## Description

The objective of this technique is to supplement the link text by adding additional text that describes the unique function of the link but styling the additional text so that it is not rendered on the screen by user agents that support CSS. When information in the surrounding context is needed to interpret the displayed link text, this technique provides a complete description of the link's input function while permitting the less complete text to be displayed.

This technique works by creating a CSS selector to target text that is to be hidden. The rule set for the selector places the text to be hidden in a 1-pixel box with overflow hidden, and positions the text outside of the viewport. This ensures the text does not display on screen but remains accessible to assistive technologies such as screen readers and braille displays. Note that the technique does not use `visibility:hidden` or `display:none` properties, since these can have the unintentional effect of hiding the text from assistive technology in addition to preventing on-screen display.

Note 1: This technique to hide link text has been advocated by some screen reader users and corporate Web authors. It has proved effective on some Web sites. Other screen reader users and accessibility experts don't recommend this as a general technique because the results can be overly chatty and constrain the ability of the experienced screen reader user to control the verbosity. The working group believes the technique can be useful for Web pages that do not have repetitive content in the hidden text areas.

Note 2: This technique can be used in combination with a style switching technique to present a page that is a conforming alternate version for non-conforming content. Refer to C29: Using a style switcher to provide a conforming alternate version and Understanding Conforming Alternate Versions for more information.

## Examples

The following examples use the CSS selector and rule set below:

`a span { height: 1px; width: 1px; position: absolute; overflow: hidden; top: -10px; }`

### 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 describes the purpose of the link.

Example Code:

    <?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" />
    <link href="access.css" rel="stylesheet" type="text/css" />
    <title>Hidden Link Text</title>
    </head>
    <body>
    <p>Washington has announced plans to stimulate economic growth.
      <a href="#"> <span>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 title of each book is followed by links that say "HTML" and "PDF." Hidden text describes the purpose of each link.

Example Code:

    <?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" />
    <link href="access.css" rel="stylesheet" type="text/css" />
    <title>Hidden Link Text </title>
    </head>
    <body>
    <dl>
    <dt>Winnie the Pooh </dt>
       <dd><a href="winnie_the_pooh.html">
          <span>Winnie the Pooh </span>HTML</a></dd>
       <dd><a href="winnie_the_pooh.pdf">
             <span>Winnie the Pooh </span>PDF</a></dd>
    <dt>War and Peace</dt>
        <dd><a href="war_and_peace.html">
          <span>War and Peace </span>HTML</a></dd>
        <dd><a href="war_and_peace.pdf">
          <span>War and Peace </span>PDF</a></dd>
    </dl>
    </body>
    </html>

## Resources

Resources are for information purposes only, no endorsement implied.

- Hidden barriers - out of sight

- CSS in Action: Invisible Content Just for Screen Reader Users

## Related Techniques

- G91: Providing link text that describes the purpose of a link
- H33: Supplementing link text with the title attribute

## Tests

### Procedure

For each `anchor` element using this technique:

1. Check that an element has been defined that confines its display to a pixel and positions text outside the display with overflow hidden

2. Check that the element of that class is included in the content of the `anchor`

3. Check that the combined content of the `anchor` describes the purpose of the link

### Expected Results

- All checks above are true.

- Top
- Contents
- Intro
- Previous: Technique C6
- Next: Technique C8