Using CSS: to hide a necessary content to users of screen readers
  |  |
Print  |
Send  |
Share         |
Warning: The original version of this document is CSS in Action: Invisible Content Just for Screen Reader Users . This French translation was done by Ideose as part of an agreement between WebAIM and Ideose .
Note: See page documents on web accessibility for a list of all translated documents. Other resources on web accessibility are also listed in the portal accessible digital .
Summary
Introduction
Sometimes there are cases where the content should be made available to users of screen reader but hidden from sighted people. In most cases, if the content (especially content that provides functionality or interactivity) is large enough for users of screen reader, it should probably be made available to all users. Where information or instructions are provided only to users of screen readers are more a reflection of poor design and poor accessibility. However, there are few cases where information is visually obvious but may not be for users of screen readers. In these cases it is appropriate to code a statement about this information so that it be read by a screen reader but invisible to sighted users.
Techniques to hide text
There are several mechanisms to hide the contents. It is important that technical implementation gives the desired result and it is accessible.
visibility: hidden; and / or display:none;
These styles hide the text to 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 use it if you want the content is not read by screen readers.
width:0px;height:0px
As above, because an element without height or width is removed from the flow of the page, most screen readers will ignore this content.
HTML attributes width and height with a zero value could therefore give the same result. This is not a correct approach for hiding content visually, but it allows content to be read by a screen reader.
text-indent: -1000px;
This approach moves the contents of 1000 pixels to the left - so outside of the visible screen. Screen readers read the text always with this style. However, if a link or form element has this style, it can result in an indication of focus (dotted lines or the "marching ants" around a link to the focus) that will extend from the where the element should be located on the page where it is in fact actually located (far left). It's not very pretty. As such, it is a correct option if the item does not contain navigation elements.
Positioning content off screen in absolute
Use CSS to move the hidden content to a position off screen usually live is considered as the most useful and accessible to visually conceal the contents.
Positioning content off screen
The following styles are recommended for visually hide the contents to be read by a screen reader.
{Position: absolute;
left:-10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;}
The CSS class. Hidden must be indicated in the code of the item that should be hidden as follows:
<div class="hidden">Ce texte et caché.</div> Sighted users will not see at all the hidden content. It is actually displayed out of their reach - well hidden to the left of the visible window of the browser. Users of screen readers have access to content as if it were not hidden. Screen readers read the content normally, ignoring completely the styles used in this technique.
Analyze the code in detail.
position:absolute; tells the browser to delete the item from the flow of the page and begin to position it. left:-10000px; moves the contents of 10,000 pixels to the left. top:auto; tells the browser to vertically position the content at the same position where it was originally.
The failure of top could result in that style left is ignored in some cases and in some browsers.
In short, this piece of code moves the 10000 pixels to the left.
width:1px; height:1px; overflow:hidden; tells the browser to 1px by 1px size to the element and visually hide everything that does not fit into these dimensions.
There are some cases where the position (left) may not work while all other styles are enabled.
In this case, the element remains in its initial position and take a size of 1 pixel.
Remark
An earlier version of this article recommended using left:0px; top:-500px .
Although this positioning operates to store the contents above the top, we found that if the element contains a hidden link or form, when it takes the keyboard focus, the browser tries to go to the element - so scroll the page up.
This can be confusing for sighted users using the keyboard.
By positioning directly on the left, the browser will not scroll up the page. It should be noted that, because links and form elements provide interactive features, they should rarely be hidden from sighted people.
Sighted users will not be able to see which element has focus since it is off the screen.
Benchmarks and indicators
Important!
Generally, an instruction on information should be hidden from sighted users and available for users of screen readers only if the information is visually obvious but unknowable for users of screen readers.
This technique can be used to provide benchmarks and indicators to users of screen readers. It should be implemented with discretion and only when necessary. The WebAIM page shows a good use of this technique in three places.
First, the search field at the top of the page has a title (label tag) immediately before him. It is visually clear that the field is a field of research, but a screen reader needs a label to give this information. To do this, we have provided a title via a label tag but visually hidden.
Second, the breadcrumb at the top of the page is a common element in websites. Most Internet users understand how it works and can identify it visually. But because a screen reader accesses this list of links in a linear manner, it may not be obvious to users of screen reader that this is the breadcrumb until that they have played a part. Therefore tell them. To do this, a hidden text "You are here:" was added just before the breadcrumbs.
Finally, we identified the start of advertising at the bottom of each page with hidden text. As with the breadcrumbs, it is visually obvious that this is an advertisement but not for a user to screen reader as it did not start reading the content.
You can see all the hidden text by disabling styles page WebAIM. Remember, all content visually hidden with CSS will be visible if the styles are disabled.
Other implementations
For a visual user, a table header cells can perform the dual function of organizing the table content and also provide labels (label) to form elements within this table, as seen in the screenshot below of a form in a data table.
The header row and column of the table are of little value in terms of understanding the layout of the table, but the headers are not form fields. When users of screen readers to tabulate a form field to another field, they will not hear the headers of the table. In fact, they do not hear any label. Screen readers require labels for text form fields. But add text labels to each form field would certainly be redundant, unnecessary and probably would be confusing for sighted users. In this case, labels can be provided in the code adjacent to their corresponding form fields but hidden using the CSS above and implemented as follows ...
<label for= »amembers "class= »hidden »> Number of members in team A </ label>
...
Another example of apparent incompatibility between the needs of users of screen readers and sighted users occurs when many developers create form fields that appear to belong to the same label. A common example of this is when two or more text entry fields are used for phone numbers.
Most sighted users in North America include the text input areas correspond to different parts of a phone number. Users of screen readers, however, may want to enter the entire phone number in the first box. They will certainly be a bit surprised when they discover that the field is limited to only three digits or that there are other fields that are not denominated who follow it.
The most obvious solution to this problem would be to combine all of the text entry boxes in one, and then provide the appropriate label. However, the CSS technique can also be applied to this situation to add labels hidden at each separate text box.
<p> Phone number:
(
<label for= »area "class= »hidden »> Area Code </ label>
<input name= »area "id= »area" type= »text "size= »3" maxlength= »3"/>
)
...
Conclusion
When the techniques presented here are used CSS to hide content, sighted users will never know that the content is present (unless they disable styles). Users of screen readers, on the other hand, will never realize that this content is invisible to sighted users. Both types of users will be able to use the content intuitively without any code modification is necessary. This can provide important contextual information, otherwise impossible to capture for screen reader users because of their visual nature. When used judiciously, this technique can solve some problems between the requirements of accessibility and the requirements of the visual layout of web pages. This is not the only technical or only way to solve this problem, but it is one of the solutions that Web developers can use when needed.
Commercial links
WebAIM is an initiative of:
Copyright 1999-2009 WebAIM
