WebAIM - Web Accessibility In Mind

CSS in Action
Invisible Content Just for Screen Reader Users

Introduction

A woman hides behind her hands.There are occasional instances where content should be made available to screen reader users, but hidden from sighted users. In the vast majority cases, content that is available visually should be available to screen reader users, and vice versa. Cases where verbose cues or instructions are provided only for screen reader users are most likely a reflection of poor design, usability, and accessibility. However, there are a few cases where information or meaning is apparent visually, but may not be apparent to screen reader users. In these rare cases, it may be appropriate to cause content to be read by a screen reader, but remain invisible to sighted users.

Techniques for hiding content

There are several mechanisms that can be used for hiding content. It's important that a technique be implemented that results in the desired outcome and accessibility.

display:none or visibility: hidden

These styles will hide content from all users. The content is removed from the visual flow of the page and is ignored by screen readers. Do not use this CSS if you want the content to be read by a screen reader. But DO use it for content you don't want read by screen readers.

hidden attribute

The HTML hidden attribute is relatively new and not supported on older browsers, but functions identical to CSS display:none—elements with this attribute will not be presented to any user.

width:0px, height:0px or other 0 pixel sizing techniques

An element with no height or width, whether defined in HTML or CSS, is typically removed from the flow of the page, so most screen readers will not read it. Do not size content to 0 pixels if you want the content to be read by a screen reader. Content styled with font-size:0px or line-height:0 may work, though the elements would still take horizontal space on the screen. All of these techniques may result in search engine penalties as they may be interpreted as malicious.

text-indent: -10000px;

This approach moves the content to the left 10000 pixels - thus off the visible screen. Screen readers will still read text with this style.

However, if a link, form control, or other focusable element is given this style, the element would be focusable, but not visible on the page—sighted keyboard users would likely be confused. This approach may be a viable option if the element does not contain navigable elements, though better techniques are available.

Absolutely positioning content off-screen

The following are the recommended styles for visually hiding content that will be read by a screen reader.

.sr-only {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}

The .sr-only CSS class ("sr-only" meaning "screen reader only", though the class name does not really matter) should then be referenced from within the tag of the element being hidden, as shown:

<div class="sr-only">This text is hidden.</div>

Sighted users will not see the hidden content at all. It will be out of their viewing range—hidden well to the left of the visible browser window. Because it is still part of the page content, screen readers will read it.

Let's analyze the styles in detail. position:absolute; tells the browser to remove the element from the page flow and to begin positioning it. left:-10000px; moves the content 10000 pixels to the left. top:auto; tells the browser to position the content vertically at the same location it was originally. width:1px;, height:1px; and overflow:hidden; tell the browser to make the element one pixel in size and to visually hide everything that does not fit into that pixel&mdashthis is useful in instances where positioning may be end-user disabled, but all other styles remain enabled.

Note

Navigable elements, such as links and form controls, should not be hidden off-screen. They would still be navigable by sighted keyboard users, but would not be visible to them, unless they are styled to become visible when they receive keyboard focus.

CSS clip

{clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;}

This fairly modern technique will hide or clip content that does not fit into a 1 pixel visible area. Like off-screen content, it will be visually hidden, but still readable by modern screen readers.

Examples

Below are examples where off-screen or clipped content might be used to improve accessibility.

Important!

In general, content should only be hidden from sighted users and made available to screen reader users when content or information is apparent visually, but not apparent to screen reader users. Use these techniques judiciously! Keep in mind that many screen reader users have some vision—what they see and what they hear should typically be in harmony.

Instructional cues and indicators

One fairly common use case for screen reader-only content is a search text input that is readily identified visually as a search field due to its position on a page and adjacent search button, but for which adjacent text is not provided. A hidden, associated <label> element with "Search terms" (or similar) text would ensure that the field is properly identified to screen reader users.

Another use case might be page breadcrumbs (such as the "Home > Articles > CSS in Action: Invisible Content Just for Screen Reader Users" text near the top of this page). These are a common and generally-understood convention due to their visual location and presentation. Because a screen reader accesses the breadcrumb links and content linearly, it may not be readily apparent to them that it is breadcrumbs. As such, hidden text of "You are here:" has been added just prior to the breadcrumbs to provide a cue/indicator to screen reader users about what follows.