Accessibility
aria-hidden='true' must not be present on the document body
When <body aria-hidden="true"
, content is
not
accessible to assistive technology.
Applying aria-hidden="true"
to otherwise accessible objects: A web page is
designed to be fully accessible, and it would be accessible if elements do not contain the
aria-hidden="true"
attribute value. Screen readers do not read content marked
with the aria-hidden="true"
attribute value. Users can still tab to focusable
elements in the hidden objects, but screen readers remain silent.
Any content or interface elements intentionally hidden from users — e.g., inactive dialogs, collapsed menus — must also be hidden from screen reader users. When items are available to sighted users — such as when they activate a button or expand a menu item — the same items must be available to screen reader users. The goal is to provide screen reader users an equivalent user experience to sighted 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. Further, when content is made available to sighted users, it makes sense to make it available to blind users as well.
Fixing the problem
Remove the aria-hidden="true"
attribute from the document
body
element.
Caution:
aria-hidden="false"
is known to work inconsistently when used in
conjunction with styles or attributes that have historically prevented rendering in
all modalities, such as display: none
, visibility: hidden
in CSS, or the hidden attribute in HTML5. Use caution and test thoroughly before
relying on this approach.
Reconsider the location of the hidden content to determine whether you can relocate it to
an area of the page other than the body
element. Typically, content is
hidden from screen readers to reduce the unnecessary information that screen reader
users would tend to skip (redundant or extraneous content).