aria-hidden="true" is used incorrectly
aria-hidden="true" is used on informative content making it inaccessible to assistive technology
- Rule ID:
- semantic-hidden
- User Impact:
- Critical
- WCAG :
- 1.3.2.a
Rule
aria-hidden="true"
must not be used on informative content unless there is a suitable replacement that is both:
- Accessible to assistive technology
- Equivalent in meaning and functionality to the hidden content
Background
Using the aria-hidden="true"
attribute on an element removes the element and all of its child nodes from the accessibility tree, making it undetectable by screen readers and other assistive technologies. aria-hidden
may be used with extreme caution to hide visibly rendered content from assistive technologies only if the act of hiding this content is intended to improve the experience for users of assistive technologies by removing redundant or extraneous content. If aria-hidden
is used to hide visible content from screen readers, the identical or equivalent meaning and functionality must be provided to assistive technologies in another way.
Source: W3C
How to Fix
If the content is not redundant or extraneous, remove the aria-hidden="true"
attribute. If the content is redundant or extraneous, provide the same information in another way that is accessible to assistive technology.