/ Published in: CSS
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
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
URL: http://www.alistapart.com/articles/now-you-see-me/