Yahoo! Accessibility

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

.completelyhidden {
    display:none;
}

Sample hidden content

Begin example

This content is hidden from all users. You will not hear it with a screen reader

End example

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="forms.html" method="get">
    <label for="searchbox">Enter a search term</label>
    <input id="searchbox" name="q" type="search" >
    <button>Search</button>
</form>

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

Sample form with hidden label

Enter a search term

Search