Skip to content

Instantly share code, notes, and snippets.

@Heydon

Heydon/vh.css

Created October 26, 2018 10:59
Show Gist options
  • Star 8 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Heydon/c8d46c0dd18ce96b5833b3b564e9f472 to your computer and use it in GitHub Desktop.
Save Heydon/c8d46c0dd18ce96b5833b3b564e9f472 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
vh.css
/* 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;
}
@alolalo
Copy link

alolalo commented Sep 30, 2020

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment