When and How to Visually Hide Content

Share this article

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;


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:

Frequently Asked Questions (FAQs) about Visually Hiding Content

What is the purpose of visually hiding content on a webpage?

Visually hiding content on a webpage is a technique used to improve the accessibility of a website. It allows screen readers to access and read out the hidden content to users who are visually impaired. This technique is also used to hide elements that are not visually appealing or necessary for sighted users but are essential for the functionality of the website.

How does visually hiding content affect SEO?

When done correctly, visually hiding content does not negatively impact SEO. Search engines like Google understand that this technique is used to improve website accessibility. However, it’s important to note that this technique should not be used to deceive search engines by stuffing keywords. Such practices can lead to penalties.

What are the different methods to visually hide content?

There are several methods to visually hide content, including using CSS properties like display: none, visibility: hidden, and text-indent. Each method has its own pros and cons and should be used based on the specific requirements of the content that needs to be hidden.

When should I use the ‘display: none’ property to hide content?

The ‘display: none’ property should be used when you want to completely remove an element from the document flow. However, it’s important to note that content hidden using this property will not be accessible to screen readers.

Can visually hidden content be accessed by keyboard navigation?

Yes, content that is visually hidden can still be accessed by keyboard navigation. This is particularly important for users who rely on keyboards to navigate through a webpage.

How can I test if my visually hidden content is accessible to screen readers?

You can test the accessibility of your visually hidden content by using screen reader software like JAWS, NVDA, or VoiceOver. These tools will read out the hidden content, allowing you to verify if it’s accessible.

Can I use visually hidden content to improve the user experience?

Yes, visually hidden content can be used to improve the user experience. For example, it can be used to hide form labels that are not necessary for sighted users but are essential for screen readers.

Is it possible to hide content only from screen readers?

Yes, it’s possible to hide content only from screen readers using the ‘aria-hidden’ attribute. However, this technique should be used sparingly as it can negatively impact the accessibility of your website.

What is the difference between ‘visibility: hidden’ and ‘display: none’?

The main difference between ‘visibility: hidden’ and ‘display: none’ is that the former hides an element but still takes up space in the layout, while the latter removes the element completely from the document flow.

Can visually hidden content be made visible on focus?

Yes, visually hidden content can be made visible when it receives focus. This can be achieved using CSS pseudo-classes like :focus or :active. This technique is useful for creating accessible skip links.

Dennis LembreeDennis Lembree
View Author

Dennis E. Lembree is an accomplished web developer who has worked for a variety of companies including PayPal, RIM, Ford, Google, and Walt Disney World. He is the author of Web Axe, a podcast and blog focused on web accessibility, and the author of the award-winning, web-accessible Twitter application Easy Chirp. He enjoys attending and speaking at conferences, meetups, and webinars. Outside of the tech world, he likes playing guitar, watching football, and frequenting Starbucks. Mr. Lembree is originally from southeastern Michigan and has also lived in Orlando, Florida. He now resides in Cupertino, California, with his wife and their two boys.

Editor's Choiceinspirationtutorial
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week
Loading form