Hiding things accessibly

Hidden for everyone: display: none; or visibility: hidden;

Hidden visually, but present for assistive tech? A .visually-hidden class with a smattering of properties to do the job correctly.

Hidden for assistive tech, but not visually? The aria-hidden="true" attribute/value.

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

If the element that uses .visually-hidden is focusable, they should become visible upon receiving focus - otherwise a sighted user will lose their focus somewhere off screen.

.visually-hidden:not(:focus):not(:active) {
  /* ... */
}

[[a11y]] [[css]]