Skip to content
Go to home

Screen Readers Only

Hide elements visually

A utility class inspired from tailwind css sr-only. Mainly used for accessibility related.

Sometimes there’s a need to hide an element visually, but still accessible to screen readers.

sr-only utility class 
/* Can be any name. I just prefer sr-only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}