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.
visibility:hiddenin this case is an adequate and acceptable solution.
Classic MethodFor 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:
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: ClipA 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.
- 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
- 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.
SummaryThere 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.
When and How to Visually Hide Content Reviewed by Aamir Pathan on 1:44 PM Rating: