• June 1, 2025

Hidden Content Accessibility Rule (axe-core 4.10)

Rule ID: hidden-content
Ruleset: axe-core 4.10
User Impact: Minor
Guidelines: Deque Best Practice

How to Fix the Problem

To resolve issues flagged by the “hidden-content” rule, you must ensure that all relevant content on the page can be triggered into view for analysis. This rule typically generates a violation when content is completely hidden—either from all users or from screen readers—and cannot be evaluated for accessibility compliance.

Steps to Fix:

1. Reveal Content During Testing:
   If content is conditionally hidden (e.g., expandable sections, modals, tabs), you should activate those elements manually or with automated test scripts to ensure they are rendered in the DOM and accessible for analysis.

2. Avoid Hiding Content Using Critical CSS:
   The following CSS properties can completely hide content from both screen readers and sighted users:

   css

   KopierenBearbeiten

   display: none;
visibility: hidden;


   If used, they prevent automated tools from analyzing this content. Replace or conditionally modify these styles so that the content can be shown when needed.

3. Use ARIA When Appropriate:
   For content that is hidden visually but should still be available to screen readers, use techniques like:

   css

   KopierenBearbeiten

   .sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}


   This ensures that content remains accessible to assistive technology while being invisible to sighted users.

4. Review Triggering Logic:
   If content is only available after a user action (e.g., clicking a button), make sure:

   • The content is programmatically included in the DOM.

   • It can be exposed using standard user interactions.

   • It is not permanently hidden in a way that bypasses analysis.

5. Use Test Scripts or Manual Review for Dynamic Content:
   Automated tools like axe may mark these cases as “incomplete.” Review and test these manually by expanding or revealing all interactive areas of your UI.

Why it Matters

If content is hidden using techniques like display: none or visibility: hidden, it is entirely inaccessible to screen readers and sighted users alike. This content cannot be tested for compliance with accessibility standards and may contain unresolved issues that go unnoticed.

Even if content is temporarily hidden for design or interaction purposes, it should be accessible when needed. Ensuring that such content can be exposed for both accessibility testing and end-user interaction helps create an inclusive experience for all users.

Rule Description

This rule alerts developers and testers to the presence of hidden content on the page that cannot be analyzed by automated accessibility tools. It serves as an indicator that manual inspection or content exposure is required to complete the accessibility evaluation.

The Algorithm (in Simple Terms)

The rule scans the page’s HTML and identifies any elements with CSS styles such as:

When such styles are detected, it flags the content as hidden. Since hidden elements are excluded from analysis, the tool recommends further review to determine whether these elements should be made visible or accessible.