Skip to content

Instantly share code, notes, and snippets.

@kieranbarker

kieranbarker/visuallyHidden.css

Last active August 23, 2020 12:33
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kieranbarker/b6f9251a7150281b2cca88ccfbb6633f to your computer and use it in GitHub Desktop.
Save kieranbarker/b6f9251a7150281b2cca88ccfbb6633f to your computer and use it in GitHub Desktop.
Download ZIP
Visually hide an element but keep it accessible to screen readers
Raw
visuallyHidden.css
/**
* Visually hide an element but keep it accessible to screen readers
* {@link https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/main.css}
* {@link http://snook.ca/archives/html_and_css/hiding-content-for-accessibility}
* {@link https://github.com/h5bp/main.css/issues/12#issuecomment-321106995}
*/
.visually-hidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment