- Success Criterion 1.1.1
- Conformance level A
Inline SVG Whose Title Text Doesn’t Match What It Shows
1.1.1 — Non-text Content
Scenario
Setting
A customer-support live-chat widget
What’s wrong
Inline SVG exposed to assistive technology but announcing raw <title>/<desc> mismatches or nothing at all.
Example
This shows up on a customer-support live-chat widget: inline SVG exposed to assistive technology but announcing raw <title>/<desc> mismatches or nothing at all.
Why it matters
Blind and low-vision people using screen readers, and anyone who browses with images disabled, when icons or photos carry meaning. On a customer-support live-chat widget, this barrier means they are left guessing what the media actually shows.
How to test
Check what the SVG's title/aria-label actually says versus what the graphic shows: a mismatched or generic name (e.g., 'icon') fails.
How to fix
Ensure the SVG's exposed name matches its meaning — a single accurate title, or hide it if decorative.
Outcome
Corrected, a customer-support live-chat widget now lets a visitor understand the image, video, or audio content.
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