# Using CSS to hide a portion of the link text

ID: C7

Technology: css

Type: Technique

## When to Use

All technologies that support CSS.

## Description

The objective of this technique is to supplement the link text by adding additional text that describes the unique function of the link and 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`. 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 have the effect of hiding the text from assistive technology in addition to preventing on-screen display.

This technique is not a method for hiding complete links, only a section of text within a link. The resources section includes methods for hiding and showing links aimed at screen reader users.

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.

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 and Understanding Conforming Alternate Versions for more information.

## Examples

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

    .visually-hidden {
      clip-path: inset(100%);
      clip: rect(1px, 1px, 1px, 1px);
      height: 1px;
      overflow: hidden;
      position: absolute;
      white-space: nowrap;
      width: 1px;
    }

### A news site with "full story" links

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.

    <p>Washington has announced plans to stimulate economic growth.
      <a href="/washington-growth/"><span class="visually-hidden">Washington stimulates
       economic growth </span>Full Story</a>
    </p>

### A list of books in different formats

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." Visually-hidden text describes the purpose of each link.

    <dl>
      <dt>Winnie the Pooh</dt>
      <dd><a href="winnie-the-pooh.html">
        <span class="visually-hidden">Winnie the Pooh </span>HTML</a></dd>
      <dd><a href="winnie_the_pooh.pdf">
        <span class="visually-hidden">Winnie the Pooh </span>PDF</a></dd>
      <dt>War and Peace</dt>
      <dd><a href="war-and-peace.html">
        <span class="visually-hidden">War and Peace </span>HTML</a></dd>
      <dd><a href="war_and_peace.pdf">
        <span class="visually-hidden">War and Peace </span>PDF</a></dd>
    </dl>

## 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 hides the text
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.

## Related Techniques

- G91
- H33

## Resources

- HTML5 Accessibility Chops: hidden and aria-hidden
- CSS in Action: Invisible Content Just for Screen Reader Users