Visually hide an element with CSS

If you hide an element with display: none, it can also hide it from assistive technology, such as screen readers.

Using a visually hidden utility, you get the best of both worlds. A visually hidden element and assistive technology can still access it.

Code language
.visually-hidden {
border: 0;
clip: rect(0 0 0 0);
height: auto;
margin: 0;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap;