Skip to content

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

About this Technique

This technique relates to:

  • 2.4.4: Link Purpose (In Context) (Sufficient when used for providing a supplemental description of the purpose of a link using one of the following techniques: )
  • 2.4.9: Link Purpose (Link Only) (Sufficient when used for providing a supplemental description of the purpose of a link using one of the following techniques: )

This technique applies to 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.

Note

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;
}

Example 2: 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>

Related Resources

No endorsement implied.

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.
Back to Top