Skip to main content
CSS is fun and cool and I like it.
Article

The `hidden` Attribute is Visibly Weak

There is an HTML attribute that does exactly what you think it should do:

<div>I'm visible</div>
<div hidden>I'm hidden</div>

It even has great browser support. Is it useful? Uhm. Maybe. Not really. … Read article

Link

Inclusively Hidden

Link

See No Evil: Hidden Content and Accessibility

Link

Beware Smushed Off-Screen Accessible Text

Snippet

Accessibility/SEO Friendly CSS Hiding

.screen-reader-text {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

This class can remove an item from the page, taking it out of flow and doesn't cause overflow scrolling.

It's better than display: none; or even visibility: hidden; when the goal is to hide the element visually but leave it accessible for screen readers.

Snook has a walkthrough of a more robust class taking into account more situations.

.element-invisible {
  position: absolute !important;
  height: 1px; width: 1px; 
  overflow: hidden;
  clip: rect(1px 
Read article