Hidden content on the page cannot be analyzed

Rule Description

Informs users about hidden content that cannot be analyzed for accessibility violations

The Algorithm, in Simple Terms

Checks for style property values of ('display') === 'none') and ('visibility') === 'hidden') to alert to the presence of hidden item content in need of review.

Why this is Important

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 to also 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 display: none or visibility: hidden are used. Changing those values to display: block, display: inline, or other display or visibility options will make the items available to screen reader users.

Compliance Data & Impact

User Impact: Minor
Disabilities Affected:
  • Blindness
  • Color-blindness
  • Sighted Keyboard Users
Severity: Minor
Issue Type:
  • Deque Experimental
WCAG Success Criteria:
  • Not applicable
Section 508 Guidelines:
  • Not applicable

How to Fix the Problem

You will need to trigger the display of this content in order to analyze it. A failure indicates there were problems analyzing the content on the page under test, whereas when "incomplete," there were hidden items identified that must be exposed in order to be analyzed. Passing of this rule (in other words, no violations found) indicates it was possible to analyze all of the content on the page and no hidden content was found.

As one of Deque's experimental rules, this one 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 display: none or visibility: hidden). All such techniques can prevent the content from being analyzed for accessibility problems, so as with CSS-generated text, those techniques should be used 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.

Related Deque University Course Pages

Other Related Resources

Additional Information

Relevant Technologies:
  • CSS
  • ARIA
Test Reliability: Automated testing is possible, with high accuracy
Rule ID: hidden-content