Hidden content on the page cannot be analyzed
Compliance Data & Impact
Disabilities Affected
- Sighted Keyboard Users
- Blind
- Colorblindness
Requirement(s)
Note: Experimental rule
WCAG Success Criteria
Not specified, or not applicable
Section 508 Guidelines
Not specified, or not applicable
Rule Description
Informs users about hidden content that cannot be analyzed for accessibility violations.
Why it Matters
Hidden content cannot be automatically analyzed for accessibility rule violations.
Visually hidden content must be accessible by both sighted and screen reader users. If there is a compelling reason to hide content from sighted users, there is usually a compelling reason also to hide that content from blind users. When the content is made available to sighted users, it makes sense to make it available to blind users as well.
Content will be hidden from screen reader users (and all sighted users too) when the CSS properties display: none or visibility: hidden are used. Changing CSS properties to display: block, display: inline, or using other display values makes the items available to screen reader users.
How to Fix the Problem
You need to trigger the display of this content to analyze it. A failure indicates problems analyzing the content on the page under test, whereas when “incomplete,” there may be hidden items identified that must be exposed to be analyzed. Passing this rule (in other words, no violations found) indicates it was possible to analyze all of the content on the page, and the test identified no hidden content.
As one of Deque’s experimental rules, the Hidden Content rule automatically alerts you to the fact that there is visually hidden content on the page under test. Various techniques exist for hiding elements and their contained content from either screen readers only, or from sighted users only. It is also possible to hide text from both sighted users and screen reader users simultaneously (for example, by using CSS properties including display: none or visibility: hidden). All such techniques can prevent the content from being analyzed for accessibility problems, so as with CSS-generated text, use these techniques with caution. Depending on the technique used to hide content, the solution lies in using the appropriate techniques to expose it so that it can then be analyzed.
The Algorithm (in simple terms)
Checks CSS style property values of display: none; and visibility: hidden; and alerts users to the presence of hidden item content requiring further review.