Accessible hiding content with CSS

Using display:none can also hide content from screen readers. If you do this, best use visibility:hidden as well, to ensure consistent behaviour in all readers.

.hide{
  display:none;
  visibility:hidden;
}

To hide from visual display but not screen readers, move the element off screen:

.hide {
  position: absolute;
  left: -999em;
  width: 0;
  overflow: hidden;
}

Last modified: 14/05/2010 Tags: css, accessibility