The ways to make an element disappear differ in whether it keeps its space, can still be clicked or focused, and is still announced by screen readers:
| Technique | Keeps space | Clickable, focusable | Screen readers |
|---|---|---|---|
| visibility: hidden | Yes | No | Hidden |
| opacity: 0 | Yes | Yes | Announced |
| display: none | No | No | Hidden |
| content-visibility: hidden | Own box only | Contents no | Contents hidden |
| .visually-hidden clip pattern | No | Yes | Announced |
visibility is inherited, so a child with visibility: visible reappears inside a hidden parent, which display: none never allows; on a table row or column, visibility: collapse removes it without recomputing column widths. A fully transparent button still intercepts clicks, so end a fade-out with visibility: hidden. The HTML hidden attribute is just display: none in the user-agent stylesheet, so any author display rule overrides it. Bootstrap 2,007 's .visually-hidden (Other Helpers) squeezes screen-reader text into a clipped 1-pixel box. See Display and Formatting for display values and Transitions for animating to and from display: none.
content-visibility (Baseline 2025) is a performance tool. With auto, the browser skips layout and paint for the contents of off-screen elements, yet they stay in the accessibility tree, find-in-page and tab order. Pair it with contain-intrinsic-size: auto 800px, a placeholder height (remembered once the real size is known) that keeps the scrollbar from jumping.