Created
October 26, 2018 10:59
-
-
Save Heydon/c8d46c0dd18ce96b5833b3b564e9f472 to your computer and use it in GitHub Desktop.
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
| /* This special class is used to remove content visually, | |
| without removing it from screen reader output. Use it in | |
| place of `display: none` when you want screen readers to | |
| identify and announce the information the (visually) hidden | |
| element contains */ | |
| .vh { | |
| clip-path: inset(100%) !important; | |
| clip: rect(1px, 1px, 1px, 1px) !important; | |
| height: 1px !important; | |
| overflow: hidden !important; | |
| position: absolute !important; | |
| white-space: nowrap !important; | |
| width: 1px !important; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Why nobody appreciates this piece of pretty CSS??
I am a total newbie to accessible implementation of code, but I love creating user experiences that matter and this gives me the tool to make my own voice-driven assistance in the UI, explaining what's happening/going to happen. Thank you!