Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
display: none is the right choice when an element should be unavailable visually, take up no layout space, and ordinarily be unavailable to screen readers. It is not the right choice for text that sighted users should not see but assistive-technology users still need. In that case, use a maintained visually-hidden CSS pattern. If the content should not be generated at all, remove it at the source instead of outputting and hiding it.
What display: none actually does
Applying display: none prevents an element and its descendants from rendering. They are removed from normal layout, so the element occupies no space, and browsers ordinarily remove them from the accessibility tree as well. Screen readers therefore do not announce the hidden content.
There is a documented accessibility exception: content hidden with display: none can still be exposed when it is referenced by a visible element through aria-describedby or aria-labelledby. Treat that as a relationship-specific behavior, not as a way to make a normally hidden block generally readable.
.is-hidden {
display: none;
}Use this for content that is conditionally unavailable to everyone—for example, a closed panel whose contents should not be navigable until the panel is opened. When JavaScript changes the state, update the control, focus behavior and any relevant ARIA state together.
#1 Best Overall
Choose the technique by the intended result
| Technique | Visual result | Layout space | Accessibility tree | Use it when |
|---|---|---|---|---|
display: none |
Not rendered | Removed | Ordinarily removed | Content is unavailable to all users in the current state |
visibility: hidden |
Invisible | Usually retained | Removed | You must preserve the element’s layout space while hiding it |
| Visually-hidden CSS | Not visually shown | Does not consume normal layout space | Available to assistive technology | Screen-reader text, hidden labels or instructions are still needed |
aria-hidden="true" |
No visual change by itself | No change by itself | Removed | Redundant or decorative content should be ignored by assistive technology |
| Remove at source | Not output | None | Not present | The content or feature should not be generated for this state or user |
When visibility: hidden is a better fit
visibility: hidden normally keeps the element’s space in the layout while making it invisible. It also removes the hidden content from the accessibility tree, so it is not a substitute for visually-hidden text that screen-reader users must receive.
.reserve-space {
visibility: hidden;
}Use it only when preserving geometry is intentional, such as maintaining a stable layout while an item is temporarily unavailable. If the space should collapse, use display: none instead.
When to use a visually-hidden pattern
Sometimes content must be absent from the visual design but remain available to assistive technology: a form label, an additional instruction, or a heading that gives a control context. A visually-hidden pattern clips and positions the content so it does not appear on screen while keeping it in the accessibility tree.
Free tools Windows power users keep installed
One-click scans. No signup required.
Use a maintained pattern from your design system or accessibility guidance rather than copying an old snippet blindly. If the hidden element can receive keyboard focus—such as a skip link—make it visible when focused. Never leave a focused control effectively invisible to keyboard users.
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.visually-hidden:focus,
.visually-hidden:focus-visible {
position: fixed;
inset: 1rem auto auto 1rem;
width: auto;
height: auto;
margin: 0;
overflow: visible;
clip: auto;
white-space: normal;
padding: .5rem .75rem;
background: #fff;
color: #000;
z-index: 1000;
}Adapt the pattern to the maintained conventions of the project. The key distinction is intent: this content remains programmatically available, unlike content hidden with display: none or visibility: hidden.
Why aria-hidden is not a visual hiding method
aria-hidden="true" changes exposure to the accessibility API; it does not hide pixels or remove layout space. Adding it to a visible element leaves sighted users seeing the content while screen readers ignore it.
Rank #4
Do not put aria-hidden="true" on a focusable element or on an ancestor that contains focusable descendants. That creates a control keyboard users can reach but assistive-technology users cannot perceive. When CSS already uses display: none, an extra aria-hidden is normally unnecessary.
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallCrashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteWhen removing the content at the source is preferable
If a feature should not exist for the current user or state, the cleanest solution is often to prevent it from being output in the server-side template, component, or application logic. That avoids shipping unused markup and prevents hidden controls, IDs or event handlers from creating state-management problems.
Best Value
This is different from hiding a temporarily unavailable panel. Source removal is appropriate only when the application has a supported, tested way to omit the feature. Do not infer a current implementation from an old forum anecdote or blindly transplant a theme hack into a modern site.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Applying the decision to a forum form
If the form should be unavailable to everyone
Use the forum or application setting, template condition, or server-side permission check that prevents the form from being generated. If no supported source-level option exists and the form is merely a client-side state, display: none can hide it, but ensure it cannot be submitted or reached by script in the hidden state.
If the form is revealed by a control
Keep the control’s state synchronized with the panel: update the button’s accessible name or aria-expanded value, reveal the panel, and place focus sensibly when the interaction requires it. Hiding only with CSS while leaving stale state in markup produces an inconsistent experience.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →If only visual users should not see supporting text
Keep the text in the document with a visually-hidden pattern. Do not use display: none, because that ordinarily removes the text from screen-reader output.
A practical checklist
- Should nobody see, read, focus or interact with it in this state? Use
display: noneor omit it at the source. - Must the layout reserve its space while it is invisible? Consider
visibility: hidden. - Must assistive-technology users receive text that sighted users do not see? Use a maintained visually-hidden pattern.
- Is the content merely decorative or duplicated? Use
aria-hidden="true"only when no focusable descendants are inside. - Can JavaScript reveal or hide it? Keep visual state, keyboard focus, and accessibility state synchronized.
- Can you remove the feature in the template or application logic? Prefer that supported source-level solution when the feature should not be present at all.
What the original CSS-Tricks question does—and does not—establish
The archived question concerned hiding an unwanted form in bbPress and asked whether a quick display: none rule was appropriate or whether the form should be excluded through PHP or a theme layer. The poster later reported finding a PHP-based solution. That historical outcome illustrates the source-removal option, but it does not provide a current, version-specific bbPress recipe. For a modern site, choose the supported template or permission mechanism for the version you run and use CSS hiding only when the element genuinely belongs in the document but is unavailable in the current state.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
