Hidden content on the page should be analyzed

Rule ID: hidden-content

Ruleset: axe-core 4.9

User Impact: Minor

Guidelines: Deque Best Practice

Need accessibility training?

Deque University offers an extensive curriculum of self-guided online courses for every skillset and experience level.

Start learning today

Compliance Data & Impact

User Impact

Minor
▼

Minor

Critical

Disabilities Affected

Sighted Keyboard Users
Blind
Colorblindness

Standard(s)

Deque Best Practice

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.

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.

Rule Description

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

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.