Start scanning free

( Perceivable / WCAG 1.3.1 )

Hidden component exposed to screen readers

This check maps to Info and Relationships. Use the guidance below to confirm the issue, understand who it affects and ship a fix.

Serious Level A WCAG 1.3.1 — Info and Relationships

What’s wrong

A modal, menu, or dialog is visually hidden but has not been removed from the accessibility tree. Screen reader users can navigate to its contents even when it is not visible.

Why it matters

Screen reader users will encounter buttons and content from closed modals while reading the page, causing confusion about what is currently on screen.

How to fix it

Add aria-hidden="true" and inert to the component when it is closed. Remove both attributes when it opens. Never rely on opacity, transform, or off-screen positioning alone to hide interactive components.

Before
<div id="modal" style="opacity:0;pointer-events:none">...</div>
After
<div id="modal" aria-hidden="true" inert>...</div>

Learn more