Accessible Solutions For Hiding Content

How To Hide Content On A Web Page

There are times when you want to hide content on your page. There are several methods, each has advantages and disadvantages. This page will help you understand why you would choose the best method.

Completely Hidden Content

Do you want to completely hide your content? This would be appropriate for a module that has a tabbed interface with 4 possible panels. One panel is displayed, the other three are hidden. You don't want to show those hidden panels to any user. Use display:none for the hidden panels.

Screen readers will also ignore sections with visibility:hidden. However, visibility:hidden removes the object visually, but does not take it out of the flow. Therefore you could end up with unwanted white space.

Sample code for completely hidden content

<div class="completelyhidden">
This content is hidden from all users. You will not hear it with a screen reader

.completelyhidden {

Sample hidden content

Begin example

End example

Listen: You shouldn't hear anything in the example between "Begin example" and "End Example" VoiceOver announces some completely hidden content

Make your tabs more accessible

accessible tab panelaccessible tab panel
Now that you know how to use display:none to completely hide your panels. You need to do more than convert their display to block for accessibility.

Ian Pouncey's article on the accessibility built into into the tabbed modules on the Yahoo! Home Page, Accessible Tabs in the new Yahoo Homepage – recreated with YUI3 and WAI-ARIA, shows you how to use YUI3 to handle the different events that hide/display the correct content, as well as allow screen readers to know how the page has changed.

Hide things visually, but not from screen readers

There are times when you want to provide information to screen readers, but it doesn't fit into the visual design. We use this mostly for form labels that are not needed for the visual user, but still required for screen readers. However, keep in mind that you do not want to hide links or other focusable elements, as keyboard users will be confused.

In the past, most developers used a combination of absolute positioning and/or negative text-indent. This can cause problems when the page template is used in a language that is read right-to-left, for it will generate a horizontal scroll bar.

The following example uses the clip property to hide a form label. Please visit our article Clip your hidden content for better accessibility for more information.

Sample code for a form with hidden label

<form class="hiddenlabel" action=" <form method="get">
<label for="searchbox"><Enter a search term
<input id="searchbox" <name="q">

.hiddenlabel label {
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);

Sample form with hidden label

Listen: You will hear a text label for the input. You won't see it on the page. VoiceOver announces a form with a hidden label

What you can do

  • Use display:none if you want the content to be hidden from everyone.
  • Use the clip pattern if you want to hide content visually but still make it available to screen readers.
  • Do not hide links or other focusable elements with the clip pattern as this will confuse keyboard users when they tab to a hidden element.