Skip to content

Instantly share code, notes, and snippets.

@MrGrigri
Created September 12, 2025 22:34
Show Gist options
  • Select an option

  • Save MrGrigri/0aae13e38562cf12ad84480b3dab9b84 to your computer and use it in GitHub Desktop.

Select an option

Save MrGrigri/0aae13e38562cf12ad84480b3dab9b84 to your computer and use it in GitHub Desktop.
A more feature-rich screen reader only class utility.
@layer utils {
:is(.sr-only, .sr-only-focusable:not(:focus, :focus-within)) {
border: 0 !important;
clip-path: inset(50%) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
width: 1px !important;
white-space: nowrap !important;
}
:is(.sr-only:not(caption), .sr-only-focusable:not(caption):not(:focus, :focus-within)) {
position: absolute !important;
}
:is(.sr-only *, .sr-only-focusable:not(:focus, :focus-within) *) {
overflow: hidden !important;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment