CSSMedium
How do the different ways of hiding an element differ for accessibility?
By FrontendPro Editorial Team Updated 8/7/2026
#css#a11y#display
Answer
| Method | Takes space | Announced by SR | Focusable |
|---|---|---|---|
display: none | No | No | No |
visibility: hidden | Yes | No | No |
opacity: 0 | Yes | Yes | Yes ← common trap |
hidden / inert | No / Yes | No | No |
.sr-only | No (1px) | Yes | Yes |
css
.sr-only {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip-path: inset(50%); white-space: nowrap;
}
opacity: 0 or an off-screen transform without visibility/inert leaves an invisible element that keyboard users can still tab into.