display:none vs visibility:hidden vs opacity:0 — what's the difference?

Three CSS properties hide elements with completely different semantics. Picking the wrong one breaks layout, accessibility, or both.

display: none

• Element is removed from the render tree.
• Takes no space in layout.
• Not focusable (Tab skips it), not announced by screen readers.
• Children with display: block are also removed regardless.
• Style/layout changes inside cost nothing.
• Toggling triggers layout when shown again.

Use for: components that should be entirely gone (closed tabs, conditionally rendered sections, mobile-only nav at desktop sizes via media query).

visibility: hidden

• Element is invisible but takes up its layout space.
• Not focusable, not announced by screen readers.
• Children can opt back in with visibility: visible.
• Cheaper to toggle than display because layout is already known.

Use for: hiding an element while preserving layout (a tooltip slot, a placeholder that flips visible without layout shift).

opacity: 0

• Element is fully transparent.
• Takes layout space.
• Still focusable, still announced by screen readers, still receives clicks (unless pointer-events: none).
• Composited — animates cheaply on the GPU (just opacity, no layout/paint).

Use for: animations only. Rarely the right "hide" — it's a transparency, not a hide. If a button has opacity: 0, sighted users see nothing but tab + click still trigger it. That's a bug.

The accessibility table.

aria-hidden="true" hides from the a11y tree but does NOT remove focusability — a focusable child with aria-hidden is a known bad combo (focusable but unannounced). Pair with tabindex="-1" or use the modern inert attribute (Safari 15.5+, Chrome 102+) which handles both.

Visually hidden but available to screen readers. Common pattern for icon-only buttons that need an accessible name:

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

Tailwind ships this as .sr-only. Don't use display: none for this — screen readers won't announce it.

Performance differences.

• display: none → re-show triggers layout from scratch.
• visibility: hidden → layout already done; show is cheaper.
• opacity: 0 → composited; animates without layout/paint.

For an animated reveal: opacity: 0 + transform is the right move. Combine with pointer-events: none while transparent so it's not clickable mid-fade.

Hidden attribute. <div hidden> is shorthand for display: none. Equivalent semantics, less specificity.

Toggle pattern (animated).

<div
  aria-hidden={!open}
  inert={!open as any}
  style={{ opacity: open ? 1 : 0, pointerEvents: open ? "auto" : "none", transition: "opacity 200ms" }}
>
  {children}
</div>

opacity for the transition; inert for a11y + focus blocking.