Visually hiding content on a web page, usually textual content, is at
times a viable technique in web design and development. It can be done
for several reasons, most importantly, to improve the experience of a
screen reader user. Other reasons include improving readability when CSS
cannot be rendered, and improving search engine optimization (SEO). For
screen reader users, situations where the need arises include:
- Labeling a form element that has meaning conveyed visually, but not
otherwise, such as inputs for search and phone number area code.
- Providing headings where related content has meaning conveyed visually, but not otherwise, such as a menu.
- Hiding “skip-to” links — anchor links which jump over large blocks
of content on a page. These type of links should be focusable and
viewable for sighted keyboard users. The most typical is a “skip to main
content” link at the beginning of a web page which often jumps past the
web page mast and global navigation.
- Providing special instructions in special circumstances where
interaction may be confusing to users of assistive technology. Use
discretion with this, and be careful when doing so; it’s important to
not be condescending like the UK Census website.
Note that
visually hiding content is a separate concept to content which is
completely hidden
purposely, a technique which can be designed for all users. An example
is a set of tabs and panels where only one panel of content is displayed
at a time. Using the CSS
display:none
and/or
visibility:hidden
in this case is an adequate and acceptable solution.
Classic Method
For years, a widely implemented and accepted method for hiding
content has been used. The WebAIM explains it well in their article
CSS in Action: Invisible Content Just for Screen Reader Users.
Here is an example of the classic method of coding hidden content,
absolutely positioning the element containing the text and moving it off
the screen:
10 |
"hidden" >Hidden content here.
|
Variations in the CSS have kicked around over the years which include
using a negative top position (instead of left); negative text
indentation; and a height of 0.
Issues have been discovered with the classic method and its variations such as:
- may cause the viewport to jump awkwardly when an invisible element receives focus
- negative text indentation method will not work when direction of language is right-to-left
- the VoiceOver screen reader (Apple) will not read content within an element that has 0 height
- hidden headings may be spoken as “text heading” instead of the heading text (reported with Safari with VoiceOver on SnowLeopard)
New Method: Clip
A new method for visually hiding content has recently emerged to
solve these issues, known as CSS clipping. It was apparently first
pioneered by Jeff Burnz in his AdaptiveThemes article
Using CSS clip as an Accessible Method of Hiding Content. The core concept boils down to this snippet below. Essentially, the
CSS 2.1 clip property
lets you specify the dimensions of an absolutely positioned element
using top, right, bottom, and left values, creating a boxed container
for the content. By setting all values to 0 pixels, the content becomes
invisible.
3 | clip : rect( 0px 0px 0px 0px ); |
In theory, this should work perfectly, but we all know browser
rendering can vary quite a bit and browsers many times do not adhere
properly to the W3C standards. Screen reader applications may also
behave differently. Other developers have improved the clip method
including Jonathan Snook in
Hiding Content for Accessibility and Thierry Koblentz in
Clip your hidden content for better accessibility.
So after several iterations and a lot of hard work in the community,
some great bulletproofing enhancements were made including (see the
final code below):
- Accommodating different syntax in IE6 and IE7; see line with comment.
- Correcting a bug in Webkit and Opera where clipped content causes overflow when guidelines says it should not; fixed with
overflow:hidden
.
- Set height to 1 pixel to ensure VoiceOver reads the content.
- And as an added precaution, the padding and border attributes are
set to 0 in order to prevent any issues related to the edges of the
clipped box.
Here’s the final code snippet. Notice that the clip values changed
from 0 to 1, which accomplishes the same result. Add this class or
replace your current class with this one, and you have a much more solid
and accessible technique for hiding content!
2 | position : absolute !important ; |
3 | clip : rect( 1px 1px 1px 1px ); |
4 | clip : rect( 1px , 1px , 1px , 1px ); |
7 | height : 1px !important ; |
Summary
There are several reasons you may want to hide content on a web
page, primarily for screen reader users. The classic CSS method works,
but there may be issues under certain edge cases. The clipping method to
hide content thus far has proven to be an improved technique. Some
extra code is still required to accommodate all browsers and screen
readers, but overall is a more solid solution.
No comments: