CSS Rules ///   Display Effect ///  Accessibility Effect


visibility: hidden; ///  Element is hidden from view, but is not removed from the normal flow (i.e., it still takes up the space it normally would) ///  Content is ignored by screen readers

display: none; ///  Element is removed from the normal flow and hidden; the space it occupied is collapsed  ///  Content is ignored by screen readers


height: 0; width: 0; overflow: hidden; ///  Element is collapsed and contents are hidden ///  Content is ignored by screen readers


text-indent: -999em; ///  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 ///  Screen readers have access to the content, but the content is limited to text and inline elements


position: absolute; left: -999em; ///  Content is removed from the normal flow and shifted off the left-hand edge; the space it occupied is collapsed ///  Screen readers have access to the content

CSS Rules ///   Display Effect ///  Accessibility Effect


visibility: hidden; ///  Element is hidden from view, but is not removed from the normal flow (i.e., it still takes up the space it normally would) ///  Content is ignored by screen readers

display: none; ///  Element is removed from the normal flow and hidden; the space it occupied is collapsed  ///  Content is ignored by screen readers


height: 0; width: 0; overflow: hidden; ///  Element is collapsed and contents are hidden ///  Content is ignored by screen readers


text-indent: -999em; ///  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 ///  Screen readers have access to the content, but the content is limited to text and inline elements


position: absolute; left: -999em; ///  Content is removed from the normal flow and shifted off the left-hand edge; the space it occupied is collapsed ///  Screen readers have access to the content

http://www.alistapart.com/articles/now-you-see-me/

The first two mechanisms are probably the most popular, with display: none; being the go-to option implemented by nearly every JavaScript library on the planet and the lion’s share of ready-made JavaScript widgets. If you don’t want your hidden content to be read by a screen reader, those defaults may work for you, but if you want to ensure users have access to content (even if it isn’t displayed visually in the current interface), the final option (positioning content offscreen) is really the way to go.

Methods for hiding content

css

CSS