R I S K M O N I T O R

Loading

Intelligent Cybersecurity Check for vulnerabilities now

Contact Info

Get A Quote

Page Title: Avoid Using aria-hidden=”true” on the Element

  • Home
  • Blog
  • Page Title: Avoid Using aria-hidden=”true” on the Element
  • June 1, 2025

Page Title: Avoid Using aria-hidden="true" on the <body> Element

Rule ID: aria-hidden-body

Ruleset: axe-core 4.10
User Impact: Critical
Guidelines: WCAG 2.1 (A), WCAG 2.0 (A), WCAG 2.2 (A), EN 301 549

How to Fix the Problem

Never use the aria-hidden="true" attribute on the <body> element. This attribute hides the entire document from assistive technologies like screen readers, making all the content inaccessible for users who rely on these tools.

Recommended Fix:

  • Remove the aria-hidden="true" attribute from the <body> tag.

    html
    <body> <!-- without aria-hidden="true" -->
    <!-- Page content -->
    </body>

Important Notes:

  • Do not try to override the issue by setting aria-hidden="false" on the body. This often does not behave reliably, especially if used alongside CSS rules like display: none or visibility: hidden, or with the native HTML hidden attribute.

  • Instead of hiding entire sections within the <body>, relocate hidden content (e.g., modals, offscreen content) into isolated containers outside of critical body-level markup if they must be temporarily inaccessible.

  • Only use aria-hidden="true" for specific components or non-essential content, and never on the document’s main structure.

Why it Matters

The aria-hidden attribute is used to hide elements from assistive technologies. If applied to the <body> element, it effectively blocks all page content from being accessed by screen readers — even though users may still navigate using the keyboard. This leads to a scenario where a visually impaired user cannot access any of the page’s information or functionality.

This is not just a technical mistake — it’s an accessibility failure that entirely excludes users who depend on screen readers. Content should be selectively hidden only when it serves a functional or user-experience purpose, such as closing dialogs or collapsing menus. Otherwise, you risk violating accessibility standards and potentially legal compliance obligations.

Rule Description

This rule ensures that the <body> tag of an HTML document does not contain the aria-hidden="true" attribute, as this would make the entire page’s content invisible to assistive technology.

The Algorithm (in Simple Terms)

  • Scan the document for a <body> element.

  • Check if the aria-hidden attribute is set to "true".

  • If found, fail the test and flag the document as inaccessible.

Tags:
Share:

Leave A Comment