Advanced Search

Methods for hiding content

/ Published in: CSS
Save to your folder(s)
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.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  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

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.