Main content of page is hidden to assistive technologies
| Field | Value |
|---|---|
| Rule code | Html_MainContent_IsAriaHidden |
| WCAG conformance level | A |
| WCAG success criterion | 4.1.2 Name, Role, Value |
| Must be fixed at source | No |
Description
Each page has main element in which the majority of HTML content is stored. We detected that the contents of a main section tag or a main landmark were hidden to assistive technologies through the use of an aria-hidden attribute being set to true. When content is hidden through the use of aria-hidden or CSS display none, the content is not picked up and announced by assistive technologies. As a result, the entirety of the contents inside a main section were made inaccessible to assistive technologies.
How to fix
Ensure the main content of your page (typically within the <body>, <main> tag, or an element with role="main") is not hidden from assistive technologies. Remove aria-hidden="true" attributes and avoid using CSS like display: none; on these elements to ensure accessibility. Additionally, if the entirety of the html or body becomes aria-hidden when a modal is shown, ensure this attribute is switched back to false on modal closing.