- Success Criterion 1.1.1
- Conformance level A
Informative Icon or Logo SVG With No Accessible Name
1.1.1 — Non-text Content
Scenario
Setting
A webinar platform's registration form
What’s wrong
Informative SVG with no accessible name (<svg> without role="img" + aria-label/<title> referenced properly).
Example
Consider a webinar platform's registration form: informative SVG with no accessible name (<svg> without role="img" + aria-label/<title> referenced properly).
Why it matters
Blind and low-vision people using screen readers, and anyone who browses with images disabled, when icons or photos carry meaning. The practical effect on a webinar platform's registration form: they get no equivalent for the sound or picture content.
How to test
Inspect the svg element in DevTools: it needs role="img" plus either a title referenced by aria-labelledby or an aria-label — missing either fails.
How to fix
Give the SVG role='img' and an accessible name (aria-label or a properly referenced <title>).
Outcome
That one change on a webinar platform's registration form means they get the same information as everyone else.
Who is affected
Blind and low-vision people using screen readers, and anyone who browses with images disabled, when icons or photos carry meaning.
Learn more
- Understanding Understanding document (opens in a new tab)
Related scenarios
- Product Photo Added as a CSS Background With No Alt Text
- Chart Alt Text That Never Explains What Each Color Means
- Outdated Alt Text That No Longer Matches the Image
- Alt Text Left as a Filename Instead of a Real Description
- Decorative Image Not Hidden From Screen Reader Users
- Decorative Image Given Alt Text Instead of Being Marked Silent