Improved .visually-hidden
Theorically bulletproof CSS class for visually hide anything and keep it accessible to ATs.
Last active
March 21, 2025 09:26
-
Star
(169)
You must be signed in to star a gist -
Fork
(32)
You must be signed in to fork a gist
-
-
Save ffoodd/000b59f431e3e64e4ce1a24d5bb36034 to your computer and use it in GitHub Desktop.
Improved .sr-only
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <button type="button"> | |
| <span aria-hidden="true">×</span> | |
| <span class="visually-hidden">Close</span> | |
| </button> | |
| <a href="/" class="visually-hidden-focusable">Skippy</a> | |
| <div dir="rtl"> | |
| <button type="button"> | |
| <span aria-hidden="true">×</span> | |
| <span class="visually-hidden">Close</span> | |
| </button> | |
| <a href="ffoodd.fr" class="visually-hidden-focusable">ffoodd.fr</a> | |
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| Improved screen reader only CSS class | |
| @author Gaël Poupard | |
| @note Based on Yahoo!'s technique | |
| @author Thierry Koblentz | |
| @see https://www.cssmojo.com/hide-content-from-sighted-users/ | |
| * 1. | |
| @note Use to only display content when it's focused, or one of its child elements is focused | |
| @see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1 | |
| @note Based on a HTML5 Boilerplate technique, included in Bootstrap | |
| * 2. | |
| @note `clip-path` shortest syntax | |
| @author Yvain Liechti | |
| @see https://twitter.com/ryuran78/status/778943389819604992 | |
| * 3. | |
| @note preventing text to be condensed | |
| author J. Renée Beach | |
| @see https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe | |
| @note Drupal 8 goes with word-wrap: normal instead | |
| @see https://www.drupal.org/node/2045151 | |
| @see http://cgit.drupalcode.org/drupal/commit/?id=5b847ea | |
| * 4. | |
| @note !important is important | |
| @note Obviously you wanna hide something | |
| @author Harry Roberts | |
| @see https://csswizardry.com/2016/05/the-importance-of-important/ | |
| */ | |
| .visually-hidden, | |
| .visually-hidden-focusable:not(:focus, :focus-within) { | |
| border: 0 !important; | |
| clip-path: inset(50%) !important; /* 2 */ | |
| height: 1px !important; | |
| margin: -1px !important; | |
| overflow: hidden !important; | |
| padding: 0 !important; | |
| width: 1px !important; | |
| white-space: nowrap !important; /* 3 */ | |
| } | |
| /* | |
| Prevent visually hidden caption from breaking table's collapsing borders | |
| @author Louis-Maxime Piton | |
| @see https://github.com/twbs/bootstrap/pull/37533 | |
| */ | |
| .visually-hidden:not(caption), | |
| .visually-hidden-focusable:not(caption):not(:focus, :focus-within) { | |
| position: absolute !important; | |
| } | |
| /* | |
| Prevent overflowing children from being focusable. | |
| @author Django Janny | |
| @see https://github.com/twbs/bootstrap/pull/41286 | |
| */ | |
| .visually-hidden *, | |
| .visually-hidden-focusable:not(:focus, :focus-within) * { | |
| overflow: hidden !important; | |
| } |
I came to the same conclusion. Thanks !
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@keltroth If I sum this case up, since scrollable elements become focusable, any child in
. sr-onlythat'd become scrollable will also become focusable.I can't see any other workaround than yours, for now.
FWIW, as @thiemeljiri said,
.sr-onlyis usually used on text-level elements. Hiding complex content this way should be avoided.