Skip to content

Instantly share code, notes, and snippets.

@jimmieego

jimmieego/screen-readers-only.css

Created March 14, 2019 20:33
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jimmieego/c587093059c0981e35c24c55da50d18c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jimmieego/c587093059c0981e35c24c55da50d18c to your computer and use it in GitHub Desktop.
Download ZIP
Screen reader only helper class for hiding content from sighted users
Raw
screen-readers-only.css
.screen-readers-only {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
width: 1px;
word-wrap: normal !important;
}
@jimmieego
Copy link
Author

jimmieego commented Dec 2, 2023 

.visually-hidden {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}

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