Display: none removes an element's box from layout and generally removes its subtree from the accessibility tree. Visibility: hidden keeps the box's space while hiding its content and interaction.
Make this comfortable
CSS display and visibility: choose the intended hidden state
When to use it
A case filter panel can be closed while the user reads the result list. If closed content should take no space and cannot be interacted with, hide the region through an application state that also updates the disclosure button. The CSS rule can render that state with display: none, but it cannot maintain aria-expanded or focus placement by itself. Visibility: hidden is useful when preserving a slot matters; it is not a way to keep hidden controls usable. Do not conflate visually hidden text for assistive technology with these hidden states. A description referenced by accessible-name attributes is a special case with browser and accessibility behavior worth testing, not a general reason to hide important instructions. Verify keyboard focus when the panel closes.
.case-filter[hidden] { display: none; }
.case-filter--reserved { visibility: hidden; }
.case-filter--open { visibility: visible; }Cost and verification
Removing a large subtree from rendering can reduce work, but toggling it repeatedly may cause layout shifts. Reserving space avoids movement but wastes room and may confuse users if the empty slot remains. Choose based on the interaction contract, not on animation convenience. The hidden attribute should be controlled by application state, and the trigger must convey whether the panel is expanded. Test that focus is moved or retained appropriately when a currently focused control is hidden, especially in dialogs and responsive navigation.
Common Mistakes
- Do not hide an active focused control without managing focus.
- Do not treat visibility: hidden as a screen-reader-only technique.
- Do not assume CSS updates aria-expanded automatically.
Connected lessons
css
reference
web