• 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 

<svg role="img" aria-labelledby="svgTitle">
  <title id="svgTitle">Icon</title>
  <path d="..."/>
</svg>
<!-- the icon is actually an animated "agent is typing" indicator -->

Why it matters

A customer waiting on live chat can't tell if the agent is actively typing a reply or the chat has gone silent, since the icon just announces "icon."

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

Match the title text to what the icon represents in context. A generic placeholder like "icon" tells assistive tech nothing useful about a status indicator.

<svg role="img" aria-labelledby="svgTitle">
  <title id="svgTitle">Agent is typing</title>
  <path d="..."/>
</svg>

Outcome

A customer hears "agent is typing" and knows to wait for a reply instead of assuming the chat disconnected.

Who is affected

Screen reader users relying on live-chat status indicators need the label to actually say what's happening.

Learn more

Related scenarios