/* "The "clip pattern" accomplishes this task for you; hide the content visually, yet provide the content to screen readers." */ .visually-hidden { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } /* For a, button, and input elements use the following to select on focus */ .visually-hidden:not(:focus):not(:active) { /* ... */ } /* If you need to toggle something with display:none, you can do so with the help of aria-hidden=true */ .my-component[aria-hidden="true"] { display: none; }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter