Inappropriately Unhidden Decorative Elements Check

Description

The “Inappropriately Unhidden Decorative Elements Check” evaluates whether any purely decorative elements (e.g., icons, background SVGs, spacer images) is not hidden from assistive technologies (AT) like screen readers.

Example outcome

I identified 1 element marked as decorative that is exposed to Assistive Technologies.

Impact

• Visual Impairments: Screen readers may announce meaningless info like “image” or “graphic,” disrupting the user’s experience and increasing cognitive load.
• Motor Impairments: Users relying on keyboard or voice control will need to tab through or hear content that has no purpose, slowing down navigation.
• Cognitive Disabilities: Users with cognitive disabilities may become confused by unnecessary auditory information that doesn’t match visible or expected context.

Fixes

To address decorative elements that are incorrectly unhidden from assistive technologies:

1. Locate the incorrectly unhidden elements.
2. If it is an <img> element, empty the alternative text to ensure screen readers skip the image, and add role="presentation" to reinforce the intention.
3. If it is an svg or an icon, add aria-hidden="true" to hide the element from AT, and focusable="false" to ensure it doesn’t appear in the tab order.
4. Elsewhere, add aria-hidden="true".

Resources

• WCAG 2.2: Understanding Success Criteria 4.1.2
• ACT Rules: Element marked as decorative is not exposed
• WebAIM: Keyboard Accessibility