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
- css
.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;
}