Skip to content

Instantly share code, notes, and snippets.

@goyuninfo

goyuninfo/Common pattern to visually hide text for only screen readers to read

Last active May 1, 2023 20:34
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 goyuninfo/14e81506efb0fbf448674f2dc7e7db23 to your computer and use it in GitHub Desktop.
Save goyuninfo/14e81506efb0fbf448674f2dc7e7db23 to your computer and use it in GitHub Desktop.
Download ZIP
To visually hide text for only screen readers to read, you can use the CSS.visuallyhidden class definition1. This is a way to visually hide text content from sighted users, yet have the content remain available for screen reader users. This is also sometimes called sr-only, accessibility, or other related class names.
Raw
Common pattern to visually hide text for only screen readers to read
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment