Maintaining Accessibility in a Responsive World

There a bit of a CSS trick is Scott Jehl’s latest article. Perhaps you’ve used an “accessible hiding” technique? That’s where you are deliberately avoiding display: none; because you want the element to be focusable, but not seen visually.

But… that can be awkward for anyone who uses the keyboard to navigate the site and also looks at the screen.

To avoid this, we try to remember that any accessibly-hidden content should be visible when it gains focus. For example, this CSS would place a focused element at the top of the viewport

.accessible-hidden {
  position: absolute;
  top: 0;
  left: -999px;
  height: 1px;
  width: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.accessible-hidden:focus {
  position: fixed;
  top: 0;
  left: 0;
  background: #fff;
  padding: 10px;
  /* etc etc... */
}

Scott credits Joe Watkins for the idea.

Direct Link →