Skip to content
GreenSnippets

Visually hidden (screen-reader only) utility class

Hide content visually while keeping it available to assistive technology.

CSS
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.sr-only-focusable:focus,
.sr-only-focusable:focus-within {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip-path: none;
  white-space: normal;
}

How it works

display: none and visibility: hidden remove content from the accessibility tree too. This pattern shrinks the element to a 1px clipped box so screen readers still announce it. Use it for icon-only buttons' labels, skip links and form hints.

The second rule reveals the element when it receives keyboard focus, which is what a skip link needs.

This snippet has been reviewed but was not executed by an automated test. Test it in your own environment before relying on it.

Related snippets