Most assistive technologies, such as screen readers, do not announce elements that are marked with aria-hidden="true". This attribute does not remove elements from the page, but it tells screen readers to ignore them. When aria-hidden="true" is applied to the <body> element, almost all content on the page becomes hidden from screen reader users. As a result, the page becomes unusable for them.
Accessible websites must treat all users equally. If content is hidden from one group of users, it should be hidden from everyone. If sighted users can see and use the page, screen reader users must also be able to see and use it. Applying aria-hidden="true" to the body breaks this balance and causes a serious accessibility problem.
WCAG Success Criteria
The following WCAG 2.1 and 2.2 requirements explain why hiding the body element causes accessibility issues.
1.3.1 Info and Relationships (Level A)
Information and structure must be available in a way that assistive technologies can understand.
Example:
If the body is hidden, screen readers cannot understand the page structure. Headings, sections, and form elements are no longer connected in a meaningful way.
4.1.2 Name, Role, Value (Level A)
User interface elements must clearly share what they are and how they work.
Example:
A button inside a hidden body cannot be correctly announced by a screen reader. This means users may not be aware of the button’s existence or its function.
Important Clarification
aria-hidden="true" does not completely remove elements from the page. In some cases, users may still tab to focusable elements, even though screen readers do not announce them. This creates confusion and makes the page harder to use.
WCAG rules clearly state that content visible to sighted users must also be available to assistive technology users. Hiding visible content from screen readers goes against these rules and makes the website inaccessible.
What is aria-hidden and How It Works
The aria-hidden attribute controls whether an element is exposed to assistive technologies, such as screen readers.
When aria-hidden="true" is applied, the element and all of its child elements are removed from the accessibility tree. This means screen readers will not announce or interact with that content, even though it may still be visible on the screen.
When aria-hidden="false" is used, the browser attempts to expose the element to assistive technologies again. However, this can behave inconsistently if the element is also hidden using CSS properties like display: none, visibility: hidden, or the HTML hidden attribute. In these cases, the content may still remain inaccessible.
This attribute is intended for small, specific cases such as hiding decorative icons, repeated labels, or visual-only content from assistive technologies. It should not be used on large structural regions like the <body> element or major sections of the page.
Why Developers Use aria-hidden
Developers often use aria-hidden when building modern interfaces such as modals, overlays, slide-out menus, or single-page applications. The goal is usually to hide background content from screen reader users while a modal dialogue is open, so users focus only on the active content.
While this intention is valid, aria-hidden is frequently applied in the wrong way, leading to serious accessibility problems.
Common Misuse and Its Impact
Sometimes, content is hidden to simplify the reading experience for screen reader users. The goal is to reduce unnecessary announcements by removing repeated, inactive, or purely decorative sections, so users can focus on the most relevant information without distraction. When done correctly, this helps assistive technology users navigate content more efficiently.
Applying this technique to the entire document, however, removes all content from the accessibility tree. This prevents assistive technology users from accessing anything at all, including the content they are meant to focus on.
For example, modal dialogs, off-screen navigation menus, or collapsed panels may need to be hidden temporarily from screen readers only, while they are inactive. These elements should be toggled individually and only when necessary. They must never be hidden globally by applying aria-hidden="true" to the entire page container, as this breaks access to the rest of the page.
How to Fix the Problem
- Remove
aria-hidden="true"from the<body>element. - Identify the specific content that was intended to be hidden and move
aria-hidden="true"to the correct element. - Avoid mixing aria-hidden with CSS techniques that also visually hide content unless you have tested the behaviour thoroughly.
- Ensure visible interactive elements remain available to assistive technologies at all times.
- Use accessibility testing tools to confirm that the document body and its children are exposed correctly.
Incorrect example:
<body aria-hidden="true">
<main>
<button>Submit</button>
</main>
</body>Corrected version:
<body>
<main>
<button>Submit</button>
</main>
</body>If certain sections need to be hidden, apply the attribute only to those areas.
Rule Description
A page fails WCAG conformance when the <body> element includes aria-hidden="true" because it hides all page content from assistive technologies, preventing screen reader users from accessing or interacting with anything on the page.
Wrapping Up
aria-hidden should only be used to hide small, non-essential content from assistive technologies. It must never be applied to visible or interactive page content. If users can see and use something, screen reader users must be able to access it too. Misusing aria-hidden can make an entire page inaccessible.
