What This Rule Checks
Content hidden using CSS (display:none, visibility:hidden) or the HTML hidden attribute is not available to any user, including screen reader users. This rule flags hidden content so it can be reviewed to ensure nothing important is being concealed unintentionally.
Who Is Affected
This issue primarily affects: Blind users, who rely entirely on screen readers or braille displays to navigate and interact with content; Low Vision users, who may use screen magnification, custom fonts, or high-contrast modes.
Why This Matters
Content hidden with display:none or visibility:hidden is removed from the accessibility tree entirely. This rule flags hidden content for review to ensure important information is not unintentionally concealed from any users.
How to Fix
Review hidden content to ensure it is intentionally hidden. If the content should be accessible to screen readers but visually hidden, use a screen-reader-only CSS class instead of display:none. Remove the hidden attribute or display:none from content that should be available.
Code Examples
<!-- Important content hidden from all users -->
<div style="display: none;">
<p>Important error message that should be visible</p>
</div>
Copy
<!-- Visually hidden but available to screen readers -->
<div class="sr-only">
<p>3 items in your shopping cart</p>
</div>
<style>
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
</style>
Copy
Common Mistakes to Avoid
- Using display:none when content should be available to screen readers.
- Hiding content with visibility:hidden without considering whether screen readers should access it.
- Not reviewing hidden content to ensure nothing important is being concealed.
Tip: Proper document structure enables assistive technologies to present content meaningfully. Headings, lists, and semantic HTML elements create a navigable outline of the page that screen reader users depend on.