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.

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.

    Resources

    Other Resources

    You may also want to check out these other resources.

    Refer to the complete list of axe 4.9 rules.

    Was this information helpful?

    You have already given your feedback, thank you..

    Your response was as follows:

    Was this information helpful?
    Date/Time feedback was submitted: