One of the major improvements in Drupal 7 accessibility are two new system CSS classes that can be used to hide content visually, but to keep it available for screen-reader users. Although solutions existed to solve this problem in the past, there is now a standardized method of implementing this behavior that can be leveraged by any module or theme developer.

Background

An excellent explanation of when this behavior might be used, and when it should not be used, can be found in the WebAIM article: CSS in Action: Invisible Content Just for Screen Reader Users.

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. (http://webaim.org/techniques/css/invisiblecontent/)

The solution

Drupal 7 does not implement the same CSS class as suggested in the WebAIM article, but we do feel that our solution:

1. Does a perfect job at making the content invisible in all browsers.
2. Works for left-to-right and right-to-left languages.
3. Does not cause the viewport to jump to the top of the page when an invisible element receives focus.
4. Is accessible to all screen-readers.

The classes

Two separate classes have been defined, one to be used for elements that cannot receive focus, and a second for elements that can receive focus. When a focusable element is styled with the .element-invisible.element-focusable class it will appear visually when it receives focus. This is to help keyboard users to not lose the system focus into an invisible black hole.

.element-invisible

/**
* Hide elements visually, but keep them available for screen-readers.
*
* Used for information required for screen-reader users to understand and use
* the site where visual display is undesirable. Information provided in this
* manner should be kept concise, to avoid unnecessary burden on the user.
* "!important" is used to prevent unintentional overrides.
*/
.element-invisible {
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}

.element-invisible.element-focusable

/**
* The .element-focusable class extends the .element-invisible class to allow
* the element to be focusable when navigated to via the keyboard.
*/
.element-invisible.element-focusable:active,
.element-invisible.element-focusable:focus {
position: static !important;
clip: auto;
}

As always, please let me know if you experience any problems with this accessibility solution, or if you require assistance implementing the solution in your module or theme.