Hiding Content for Accessibility

Sometimes a website that seems clear and easy to use for sighted users can cause some confusion for those who rely on a screen reader for navigation.

In addition to semantic elements, we need to label regions to make a page easier to navigate.

When content is added for screen readers that would seem redundant to sighted users, or otherwise disrupt the design, it should be visually hidden. These styles are recommended by WebAIM for hiding content off-screen:

.sr-only {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

In CSS in Action WebAIM covers this and several other techniques for visually hiding content.