Skip to content

Instantly share code, notes, and snippets.

@JM-Mendez

JM-Mendez/visuallyHidden.css

Created June 7, 2020 22:06
Show Gist options
  • Save JM-Mendez/0b33dee1358a2fa6576fb88e996530be to your computer and use it in GitHub Desktop.
Save JM-Mendez/0b33dee1358a2fa6576fb88e996530be to your computer and use it in GitHub Desktop.
Download ZIP
Accessibly hide text elements (mainly useful for section headers)
Raw
visuallyHidden.css
/* https://a11yproject.com/posts/how-to-hide-content/ */
.visually-hidden {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
white-space: nowrap; /* added line */
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment