Visually Hidden CSS Classes to Allow Content To Be Hidden On Screen and Accessible To Screen Readers

Tailwind CSS has a .sr-only utility class that hides content on screen while leaving it accessible to screen readers:

position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;

Bootstrap has a .visually-hidden helper class:

width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important; /* Fix for https://github.com/twbs/bootstrap/issues/25686 */
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;

/* Fix for positioned table caption that could become anonymous cells */
&:not(caption) {
  position: absolute !important;
}

/* Fix to prevent overflowing children to become focusable */
* {
  overflow: hidden !important;
}

Bootstrap differentiates between visually hidden and visually hidden but focusable content.

Feedback?

Email us at enquiries@kinsa.cc.