Posted By

thesmu on 05/27/11


Tagged

css visibility hide screen accessibility hidden readers


Versions (?)

Methods for hiding content


 / Published in: CSS
 

URL: 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.

  1. CSS Rules /// Display Effect /// Accessibility Effect
  2.  
  3.  
  4. 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
  5.  
  6. display: none; /// Element is removed from the normal flow and hidden; the space it occupied is collapsed /// Content is ignored by screen readers
  7.  
  8.  
  9. height: 0; width: 0; overflow: hidden; /// Element is collapsed and contents are hidden /// Content is ignored by screen readers
  10.  
  11.  
  12. 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
  13.  
  14.  
  15. 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

Report this snippet  

You need to login to post a comment.