CSS in Action: Invisible Content Just for Screen Reader Users
Article Contents
Translations
German - External Link - courtesy of courtesy of Gabriele Strache
Introduction
There are occasional instances where content should be made available to screen reader users, but hidden from sighted users. In most cases, if content (particularly content that provides functionality or interactivity) is important enough to provide to screen reader users, it should probably be made available to all users. Cases where verbose cues or instructions are provided only for screen reader users are most likely a reflection of poor design and accessibility. However, there are a few cases where information is apparent visually, but may not be apparent to screen reader users. In these cases, it may be appropriate to mark-up content in a way that it is read by a screen reader, but invisible to sighted users.
Techniques for hiding text
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.
visibility: hidden; and/or display:none;
These styles will hide text from all users. The text 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.
width:0px;height:0px
As above, because an element with no height or width is removed from the flow of the page, most screen readers will ignore this content. HTML width and height may give the same result. This is not a viable approach for hiding content visually, but allowing it to be read by a screen reader.
text-indent: -1000px;
This approach moves the content to the left 1000 pixels - thus off the visible screen. Screen readers will still read text with this style. However, if a link or form element is given this style, it may result in a focus indicator (the dotted lines or 'marching ants' that surround a focused link) that extends from where the element should be located in the page to the place it is actually located (way to the left). This is not very pretty. As such, this is a viable option if the element does not contain navigable elements.
Absolutely positioning content off-screen
Using CSS to move hidden elements to a position off-screen is generally accepted as the most useful and accessible method of hiding content visually.
Positioning content off-screen
The following are the recommended styles for visually hiding content that will be read by a screen reader.
.hidden
{position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;}The .hidden CSS class should then be referenced from within the tag of the element being hidden, as shown:
<div class="hidden">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. Screen reader users will have access to the content as if it were not hidden at all. Screen readers read the content normally, completely ignoring the styles used in this technique.
Let's analyze the code 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. Omitting top may result in the left style being ignored in some instances and browsers. In short, this part of the code moves the element 10000 pixels straight to the left.
width:1px; height:1px; overflow:hidden; tells the browser to make the element 1px by 1px in size and to visually hide everything that does not fit into these dimensions. While this is a likely a little overkill and can probably be omitted in most circumstances, there are a few instances where positioning may be disabled, but all other styles remain enabled. In this case, the element will remain in its original position, but will only take 1 pixel of space.
Note
A previous version of this article recommended using left:0px; top:-500px. While this worked by positioning the content above the top of the page, we've since discovered that if the hidden element contained a link or form element, that upon receiving keyboard focus, the browser would attempt to scroll to the element - thus scrolling the browser to the top of the page. This could result in confusion for sighted keyboard users. By positioning directly to the left, the browser will not scroll to the top of the page. It should be noted that because links and form elements provide interactive functionality, they should rarely be hidden from sighted users. Sighted users will not be able to see which element currently has focus because it is off-screen.
Instructional cues and indicators
Important!
In general, content should only be hidden from sighted users and made available to screen reader users when content is apparent visually, but not apparent to screen reader users.
This technique can be used to provide instructional cues and indicators to screen reader users. This should be implemented with discretion and only where necessary. This page demonstrates proper use of this technique in three places.
First, the search text box at the top of the page has a hidden label immediately before it. It is very apparent visually that the text box is for searching, but a screen reader requires a label for the box. As such, we provided a label, but have hidden it visually.
Second, the breadcrumbs at the top of the page are a common design convention. Most web users understand the convention and can identify breadcrumbs visually. Because a screen reader accesses the breadcrumb links and content linearly, it may not be apparent to them that it is breadcrumbs until they have read a portion of it. As such, we have added hidden text of "You are here:" just prior to the breadcrumbs.
Finally, we identify the beginning of the advertisements at the bottom of each page with hidden text. As before, it is visually clear that they are advertisement, but this may not be known by a screen reader user when they begin reading this content.
You can see all of this hidden text by disabling styles for this page. Remember, all content hidden visually with CSS will become visible if styles are disabled.
Other implementations
To a visual user, table header cells can perform the dual function of organizing table content and also providing labels for the form elements within that table, as seen in the screenshot of a form within a data table below.
The table row and column headers are somewhat useful in terms of understanding the layout of the table, but the headers do not act as form labels. When screen reader users tab from one form element to another, they will not hear the table headers read to them. In fact, they will not hear any label at all. Screen readers require text labels for form elements. But adding text labels to each of the form elements would certainly be redundant, overwhelming, and likely confusing to sighted users. In this case, the labels could be provided in the markup adjacent to their respective form elements, but hidden using the CSS above and implemented as such...
…
<label for="amembers" class="hidden">Number of members in team A</label>
…
Another example of apparent incompatibility between the needs of screen readers users and visual users occurs when developers create multiple form elements that seemingly belong to the same label. A common example of this is when two or more text input elements are used for phone numbers.
Most visual users in North America will understand that the individual text input areas correspond to the different sections of standard phone numbers. Screen reader users, however, may attempt to enter the entire phone number in the first box. Confusion is likely when they discover that the box limits them to only 3 characters or that there are additional unlabeled text boxes that follow.
The most obvious workaround for this particular problem would be to combine all of the text input boxes into a single text input box, and then provide the appropriate label. However, this CSS technique can also be applied to this situation to add hidden labels to each distinct text box.
<form method="post" action="">
<p>Phone number:
(
<label for="area" class="hidden">Area code</label>
<input name="area" id="area" type="text" size="3" maxlength="3"/>
)
…
Note
For both examples above, the title attribute could also be used to provide this information. Information in the title attribute will be read by screen readers when a label is not present. Additionally, aria-labelledby could be used provide multiple labels per input or multiple inputs per label.
Conclusion
When the CSS techniques presented here are used to hide content, sighted users will never know that the content is there at all (unless they disable styles). Screen reader users, on the other hand, will never realize that this content is invisible to sighted users. Both kinds of users will be able to use the content intuitively, without having to adjust for either too much or too little information in the markup. This can provide important contextual cues that are otherwise impossible for screen reader users to grasp because of the visual nature of these cues. When used judiciously, this technique can resolve some of the tension between the demands of accessibility and the demands of visual design. It is not the only technique or method of solving this problem, but it is one that web developers can add to their list of possible solutions when the need arises.
WebAIM is an initiative of:
