Elements with role="img" must have a name

Rule role-img-name · Images & non-text content · impact serious · Static + live

↩ Back to the rules index · WCAG cross-reference

Why it matters#

role="img" tells assistive tech to treat a composed graphic (e.g. a group of emoji or icon font) as a single image, so it must carry a name describing that image.

How to fix#

Add aria-label or aria-labelledby to the element carrying role="img".

Example#

<span role="img">🎉🎉🎉</span>

<span role="img" aria-label="celebration">🎉🎉🎉</span>

WCAG success criteria#

1.1.1 Non-text Content — Level A#

All non-text content (images, icons, controls) needs a text alternative that conveys the same purpose, or be marked decorative so assistive tech can ignore it.

Understanding 1.1.1

Standards#

This rule contributes to the following standards:

WCAG A EN 301 549 Section 508 Trusted Tester ACT

References#

• WAI-ARIA — img role