When and How to Visually Hide Content

Visually hiding content on a web page, usually textual content, is at times a viable technique in web design and development. It can be done for several reasons, most importantly, to improve the experience of a screen reader user. Other reasons include improving readability when CSS cannot be rendered, and improving search engine optimization (SEO). For screen reader users, situations where the need arises include:

• Labeling a form element that has meaning conveyed visually, but not otherwise, such as inputs for search and phone number area code.
• Providing headings where related content has meaning conveyed visually, but not otherwise, such as a menu.
• Hiding “skip-to” links—anchor links which jump over large blocks of content on a page. These type of links should be focusable and viewable for sighted keyboard users. The most typical is a “skip to main content” link at the beginning of a web page which often jumps past the web page mast and global navigation.
• Providing special instructions in special circumstances where interaction may be confusing to users of assistive technology. Use discretion with this, and be careful when doing so; it’s important to not be condescending like the UK Census website.

Note that visually hiding content is a separate concept to content which is completely hidden purposely, a technique which can be designed for all users. An example is a set of tabs and panels where only one panel of content is displayed at a time. Using the CSS display:none and/or visibility:hidden in this case is an adequate and acceptable solution.

Classic Method

For years, a widely implemented and accepted method for hiding content has been used. The WebAIM explains it well in their article CSS in Action: Invisible Content Just for Screen Reader Users. Here is an example of the classic method of coding hidden content, absolutely positioning the element containing the text and moving it off the screen:

.hidden {
    position: absolute;
    left: -9999em;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    }

<div class="hidden">Hidden content here.</div>

Variations in the CSS have kicked around over the years which include using a negative top position (instead of left); negative text indentation; and a height of 0. Issues have been discovered with the classic method and its variations such as:

• may cause the viewport to jump awkwardly when an invisible element receives focus
• negative text indentation method will not work when direction of language is right-to-left
• the VoiceOver screen reader (Apple) will not read content within an element that has 0 height
• hidden headings may be spoken as “text heading” instead of the heading text (reported with Safari with VoiceOver on SnowLeopard)

New Method: Clip

A new method for visually hiding content has recently emerged to solve these issues, known as CSS clipping. It was apparently first pioneered by Jeff Burnz in his AdaptiveThemes article Using CSS clip as an Accessible Method of Hiding Content. The core concept boils down to this snippet below. Essentially, the CSS 2.1 clip property lets you specify the dimensions of an absolutely positioned element using top, right, bottom, and left values, creating a boxed container for the content. By setting all values to 0 pixels, the content becomes invisible.

.hidden {
  position: absolute;
  clip: rect(0px 0px 0px 0px);
}

In theory, this should work perfectly, but we all know browser rendering can vary quite a bit and browsers many times do not adhere properly to the W3C standards. Screen reader applications may also behave differently. Other developers have improved the clip method including Jonathan Snook in Hiding Content for Accessibility and Thierry Koblentz in Clip your hidden content for better accessibility. So after several iterations and a lot of hard work in the community, some great bulletproofing enhancements were made including (see the final code below):

• Accommodating different syntax in IE6 and IE7; see line with comment.
• Correcting a bug in Webkit and Opera where clipped content causes overflow when guidelines says it should not; fixed with overflow:hidden.
• Set height to 1 pixel to ensure VoiceOver reads the content.
• And as an added precaution, the padding and border attributes are set to 0 in order to prevent any issues related to the edges of the clipped box.

Here’s the final code snippet. Notice that the clip values changed from 0 to 1, which accomplishes the same result. Add this class or replace your current class with this one, and you have a much more solid and accessible technique for hiding content!

.hidden {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0 !important;
  border: 0 !important;
  height: 1px !important; 
  width: 1px !important; 
  overflow: hidden;
}

Summary

There are several reasons you may want to hide content on a web page, primarily for screen reader users. The classic CSS method works, but there may be issues under certain edge cases. The clipping method to hide content thus far has proven to be an improved technique. Some extra code is still required to accommodate all browsers and screen readers, but overall is a more solid solution.

Further reading:

• Drupal 7, two new system classes to improve accessibility (Everett Zufelt)
• Showing and hiding content with pure CSS3 (Dev.Opera)
• Hiding Content for Screen Reader Users (Mike Cherim, Beast Blog)

Frequently Asked Questions (FAQs) about Visually Hiding Content