hidden-content

Description

The hidden-content rule notifies auditors when content on a page is hidden using CSS (display: none, visibility: hidden) or the HTML hidden attribute. While hiding content is a valid and common technique, hidden content that later becomes visible, for example through modals, expandable panels, or JavaScript-driven updates, must itself be fully accessible when revealed. This rule flags hidden content for review so that any accessibility issues within it can be resolved before they affect users.

This rule meets WCAG requirements by:

1. Ensuring Programmatic Determinability (WCAG 4.1.2 Name, Role, Value and RGAA 10.8: Hidden content is appropriately ignored by assistive technology): It prompts review of hidden content to ensure that interactive elements within it have proper names, roles, and values once they are made visible.
2. Preserving Information and Relationships (WCAG 1.3.1 Info and Relationships and RGAA 10.8: Hidden content is appropriately ignored by assistive technology): It ensures that structural relationships conveyed through presentation are correctly implemented for content that transitions from hidden to visible states.

To comply with this rule, review all hidden content and ensure it is fully accessible before it is shown to users.

Examples

This example shows a hidden modal dialog with a button that uses only “X” as its text. When the dialog becomes visible, screen reader users will not understand that this button closes the dialog.

Here, the hidden dialog is made fully accessible. The dialog has an accessible name via aria-labelledby, and the close button has a descriptive aria-label, so everything works correctly with assistive technologies when the dialog is revealed.

How to fix?

To fix violations of the hidden-content rule, follow these steps:

• Review all elements hidden via CSS or the hidden attribute to verify that any interactive controls within them have proper accessible names, roles, and values.

• Ensure that when hidden content is made visible, such as when a modal opens, focus is moved into it correctly so keyboard and screen reader users can interact with it immediately.

• Do not use CSS hiding techniques to bypass accessibility requirements. Content that is visually hidden but remains reachable via keyboard (such as skip links) must be fully operable.

Reference

• WCAG Success Criterion 4.1.2: Name, Role, Value

• WCAG Success Criterion 1.3.1: Info and Relationships
• RGAA 10.8: Hidden content is appropriately ignored by assistive technology