Theorically bulletproof CSS class for visually hide anything and keep it accessible to ATs.
Last active
April 11, 2024 22:55
-
-
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="sr-only">Close</span> | |
| </button> | |
| <a href="/" class="sr-only sr-only-focusable">Skippy</a> | |
| <div dir="rtl"> | |
| <button type="button"> | |
| <span aria-hidden="true">×</span> | |
| <span class="sr-only">Close</span> | |
| </button> | |
| <a href="ffoodd.fr" class="sr-only sr-only-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 `clip` is deprecated but works everywhere | |
| @see https://developer.mozilla.org/en-US/docs/Web/CSS/clip | |
| * 2. | |
| @note `clip-path` is the future-proof version, but not very well supported yet | |
| @see https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path | |
| @see http://caniuse.com/#search=clip-path | |
| @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/ | |
| */ | |
| .sr-only { | |
| border: 0 !important; | |
| clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */ | |
| -webkit-clip-path: inset(50%) !important; | |
| clip-path: inset(50%) !important; /* 2 */ | |
| height: 1px !important; | |
| margin: -1px !important; | |
| overflow: hidden !important; | |
| padding: 0 !important; | |
| position: absolute !important; | |
| width: 1px !important; | |
| white-space: nowrap !important; /* 3 */ | |
| } | |
| /* | |
| Use in conjunction with .sr-only to only display content when it's focused. | |
| @note Useful for skip links | |
| @see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1 | |
| @note Based on a HTML5 Boilerplate technique, included in Bootstrap | |
| @note Fixed a bug with position: static on iOS 10.0.2 + VoiceOver | |
| @author Sylvain Pigeard | |
| @see https://github.com/twbs/bootstrap/issues/20732 | |
| */ | |
| .sr-only-focusable:focus, | |
| .sr-only-focusable:active { | |
| clip: auto !important; | |
| -webkit-clip-path: none !important; | |
| clip-path: none !important; | |
| height: auto !important; | |
| margin: auto !important; | |
| overflow: visible !important; | |
| width: auto !important; | |
| white-space: normal !important; | |
| } |
It would indeed, but won't:
- appear when CSS is disabled for any reason,
- be taken into account when selecting the component,
- translate when using thing like Google Translate…
There might be more arguments, but you got the picture: I really think visually hidden content is better than ARIA attributes — and it also better respects ARIA rules, since we can use HTML & CSS to do this.
Thank you so much for this. You may want to change the first see link (in the css) to an archive.org copy as the original is no longer available.
Thanks @GlitzSmarter for reporting, I managed to find a copy on the author's own blog.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Are the better examples because it doesn’t fit in the use of a button since a button can handle the same thing using
aria-labelPretty sure the
aria-labelwill override the text content of a button for screen readers. 🤔