[Accessibility] Proper handling of decorative elements and aria-hidden content (WCAG 1.1.1 / 4.1.2)
Hello H5P community,
During our accessibility audit (WCAG 2.1 AA / RGAA 4.1), we found two opposing issues related to how H5P handles decorative and hidden content for assistive technologies.
Issues identified
1. Decorative SVGs announce unnecessary content (WCAG 1.1.1 — Non-text Content)
Purely decorative elements, such as the star SVG icon used for validation feedback, contain a <title> element. Screen readers read this title aloud, creating audio clutter ("noise") that distracts users from the actual content.
Expected behaviour: Decorative images and icons should be hidden from assistive technologies. This can be achieved by:
- Adding aria-hidden="true" to the SVG element, OR
- Removing the <title> tag from decorative SVGs, OR
- Adding role="presentation" or role="img" with an empty aria-label
2. Meaningful content hidden with aria-hidden="true" (WCAG 4.1.2 — Name, Role, Value)
Some activities apply aria-hidden="true" to entire content containers.
When no accessible alternative is provided, this renders the content completely invisible to assistive technology users. They cannot access the content at all.
Expected behaviour: aria-hidden="true" should never be applied to containers with meaningful content unless an equivalent accessible alternative is available. If content is temporarily hidden (e.g. in a progressive disclosure pattern), it should use appropriate techniques such as display:none (which also hides from AT) or be properly managed with aria-expanded and dynamic visibility.
WCAG / RGAA references
- WCAG 1.1.1 – Non-text Content (Level A)
- WCAG 4.1.2 – Name, Role, Value (Level A)
- RGAA 1.2 – Decorative images must have an empty text alternative
- RGAA 10.8 – Hidden content must not be exposed to assistive technologies (and vice versa: visible content must not be hidden from AT)
Content types affected
- Issue 1 (decorative SVGs): observed in activities that display validation feedback (stars, checkmarks, crosses) — likely affects Question Set, Multiple Choice, True/False, and others using the H5P.Question framework.
- Issue 2 (aria-hidden on content): observed in various interactive activities where content sections are dynamically shown/hidden.
