aria-hidden=true

[JenM00re]

Ensure that aria-hidden=true is being used properly. All arrows next to "view course" are labeled as such.

**Desktop (please complete the following information):

• Mac OS 15.4.1 (24E263)
• Chrome
• Version 136.0.7103.93 (Official Build) (arm64)

Alert: Element has Aria-hidden | ANDI docs

Alert: Element has Aria-hidden

Element is hidden from screen reader using [aria-hidden=true]; Investigate.

Why did ANDI alert this?

This element has aria-hidden="true" or it's contained by (an ancestor of) an element that has aria-hidden="true".

Why is this an accessibility concern?

If the element is interactive or the sole source of meaningful information, it should be recognized by a screen reader so that a user with a vision disability can interact with the element or access its meaning.

The purpose of aria-hidden="true" is to make a screen reader ignore the element. Sometimes that's okay (more about that below). But when an element has aria-hidden="true" and it's also focusable or tabbable, that could cause an accessibility problem because those attributes are contradicting.

What should be done?

aria-hidden="true" is meant to be used in specific situations. It's okay to use aria-hidden="true" when:

• The element contains visual information that is decorative only (not meaningful),
• The element contains meaningful visual information that is communicated to screen reader users elsewhere on the page, or
• The element is an interactive control that can only be controlled with a mouse and there exists a keyboard accessible alternative to perform the functionality

It is rare that focusable elements should have aria-hidden="true". Most likely, if an element is focusable it should not have aria-hidden="true" and should not have a parent element with aria-hidden="true".

If the element should not be used by all users, hide the element using css display:none which will remove the element from the screen and will hide the element from screen reader users.

One example where aria-hidden="true" usage is acceptable and common is in the case of modal dialogs. When the modal is open, the "grayed-out background" should not be accessible to any user. This inaccessible content may have aria-hidden="true" to complement the "grayed out" visual cue.