| Title | Hidden Decorative Elements Check |
|---|---|
| id | element_04 |
| type | true |
| elem | all |
| test | elementHiddenFocus |
| score | 10 |
| level | A |
| trust | 1 |
| ref | 46ca7f |
| scs | 4.1.2 |
| dis | 43353 |
| result | passed |
Hidden Decorative Elements Check
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".
I haven't found any elements marked as decorative that have been exposed to Assistive Technologies.
- 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.
To address decorative elements that are incorrectly unhidden from assistive technologies:
- Locate the incorrectly unhidden elements.
- If it is an
<img>element, empty the alternative text to ensure screen readers skip the image, and addrole="presentation"to reinforce the intention. - If it is an svg or an icon, add
aria-hidden="true"to hide the element from AT, andfocusable="false"to ensure it doesn’t appear in the tab order. - Elsewhere, add
aria-hidden="true".