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

Applicability

All technologies that support CSS .

This technique relates to:

  • 2.4.4: Link Purpose (In Context) (Sufficient when used with 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 with Providing a supplemental description of the purpose of a link using one of the following techniques: )

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 can have the unintentional 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 below include methods for hiding and showing links aimed at screenreader 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 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 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.


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

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.

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

Other sources

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.