Choosing the Right Way to Hide Things in CSS
CSS offers a lot of ways to hide content, and picking the wrong one can break your layout or your accessibility. The trick is matching the method to what you actually need: hide from everyone, hide only from screen readers, hide only visually, or hide it without collapsing the space it occupies.
Hidden from everyone
If the element should be completely gone — no visual presence, no screen reader announcement — then display: none; is the direct answer. It removes the element from the rendering tree entirely.
Hidden from screen readers only
For cases where the visual design is self-explanatory and the extra information would be redundant noise to assistive tech—for instance, a decorative icon sitting next to a text label—use the aria-hidden attribute. It keeps the element visibly rendered but excludes it from the accessibility tree.
Hidden visually only
When you need to hide something on screen but keep it available to screen readers (think of a non-active tab's content that should not be announced until activated), you want a .sr-only class. This leaves the content accessible while concealing it visually; removing the class restores it.
Hidden but still taking up space
Occasionally you need the element to vanish visually without losing its physical footprint. A classic example is a loading spinner inside a button: the icon should reserve its slot even when not visible to prevent layout shifting when it appears. transform: scale(0) achieves exactly this—the element visually collapses but retains its original space and remains accessible to screen readers.
Fading out and in
When you want a smooth fade rather than an instant collapse, opacity is the property to transition between 0 and 1. But opacity alone leaves the element present and focusable even when invisible. The companion trick is to pair it with visibility, which is also transitionable. Use visibility: hidden on fade-out and visibility: visible on fade-in — the element stays out of the screen reader’s way when hidden, then becomes available again when shown.
These techniques don’t cover every edge case, but they handle the vast majority of hiding scenarios. The logic behind each one is straightforward: decide who should see it, who should interact with it, and whether freeing up its space matters.
