Different ways of Hiding Content

A list apart author, Aaron Gustafson, wrote various way of hiding content. This is especially useful when building Javascript-based scripts. Javascript has become an essential part of a website’s life. It almost feels like you cant do anything on the web without the use of Javascript. Here are a few ways you can hide content and the type of accessibility & display effect.

1) visibility: hidden;

Display Effect:

Element is hidden from view, but is not removed from the normal flow (i.e., it still takes up the space it normally would)

Accessibility Effect:

Content is ignored by screen readers

2) display: none;

Display Effect:

Element is removed from the normal flow and hidden; the space it occupied is collapsed

Accessibility Effect:

Content is ignored by screen readers

3) height: 0; width: 0; overflow: hidden;

Display Effect:

Element is collapsed and contents are hidden

Accessibilty Effect:

Content is ignored by screen readers

4) text-indent: -999em;

Display Effect:

Contents are shifted off-screen and hidden from view, but links may “focus” oddly and negative indent may not prove long enough to fully hide content

Accessibility Effect:

Screen readers have access to the content, but the content is limited to text and inline elements

5) position: absolute; left: -999em;

Display Effect:

Content is removed from the normal flow and shifted off the left-hand edge; the space it occupied is collapsed

Accessibility Effect:

Screen readers have access to the content

You can read the entire article at A List Apart. If there is anything the web has grown rapidly in, I’d say its Javascript. Its powerful tool to build rich interactive engaging experiences.