Hidden Decorative Elements Check

Description

The “Hidden Decorative Elements Check” evaluates whether all purely decorative elements (e.g., icons, background SVGs, spacer images) are properly hidden from assistive technologies (AT) like screen readers, using aria-hidden="true", empty alt="", or role attributes like role="presentation".

Example outcome

I haven’t found any elements marked as decorative that have been 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