Inform users about hidden content.

The hidden-content rule alerts developers that there is visually hidden content on the page that cannot be automatically analyzed for accessibility. This rule helps identify areas needing manual review to ensure hidden content does not create accessibility barriers.

What is being tested?

This rule checks for:

• Elements hidden using display: none or visibility: hidden.
• Content that is excluded from both visual display and screen reader access.

Why it matters

Hidden content cannot be automatically analyzed for accessibility issues. If this content is later revealed to users (visually or programmatically), it may introduce accessibility barriers unless tested. Ensuring hidden content is accessible and meaningful to all users, including screen reader users, is essential when it becomes visible or interactive.

How to fix the problem

• Identify hidden elements using display: none or visibility: hidden.
• Temporarily expose hidden content (for example, by toggling CSS or using dev tools) to test it for accessibility issues.
• Ensure that when hidden content becomes visible, it remains perceivable and operable by all users, including those using assistive technologies.

Incorrect example

<div style="display: none;">
  Important instructions for users
</div>

Correct approach

<div class="hidden sm:block">
  This content is hidden only for certain screen sizes but still accessible when shown.
</div>

<div aria-hidden="true">
  Decorative content hidden from screen readers.
</div>

Best practices

• Only hide content when it is non-essential or decorative, or when it is meant to be revealed interactively.
• Use aria-hidden="true" to hide elements from screen readers when appropriate, instead of relying solely on CSS.
• Regularly test hidden and dynamically revealed content using assistive technology tools.