aria-hidden="true" is used incorrectly

Link to aria-hidden="true" is used incorrectly copied to clipboard

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:

  1. Accessible to assistive technology
  2. 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.