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. It uses the Clip Method identified by Jonathan Snook in his 2011 piece on the topic while working on the problem for Yahoo. This allows focus to be set on offscreen content. Tailwind specifies padding and margin as well as border-width and white-space values in this updated variation:

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. This also uses the clip method and the exact same properties although with a bit more finesse as to when to apply absolute positioning and control of children overflowing rather than the parent element:

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.

Revisions

June 5, 2025

Broke down the theory a bit more for each method, linking to the Jonathan Snook article while identifying the differences in the approaches.

Feedback?

Email us at enquiries@kinsa.cc.