• 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

The live-chat status is an inline SVG with role="img" and a <title> of "Icon" referenced by aria-labelledby. That name is a placeholder, not an alternative for what the graphic shows, so a screen reader hears "Icon" instead of learning that an agent is typing (F30).

Watch on YouTube (captions available)

Example 

<svg role="img" aria-labelledby="svgTitle" viewBox="0 0 24 24" width="24" height="24">
  <title id="svgTitle">Icon</title>
  <circle cx="5" cy="12" r="2"/>
  <circle cx="12" cy="12" r="2"/>
  <circle cx="19" cy="12" r="2"/>
</svg>
<!-- three dots that mean "agent is typing" on screen -->

Why it matters

A customer waiting on live chat may think the chat has gone silent, because the status only announces "Icon" instead of saying an agent is typing.

How to test

In the browser's accessibility tree (DevTools), find the SVG: it should be an image with a name that matches what the graphic means in context. Compare the name (from aria-label, or a <title> referenced by aria-labelledby) to what a sighted user would understand. Placeholder names such as "Icon", "image", or "svg", or a title that describes the wrong thing, fail (F30). Then listen with a screen reader: you should hear the real meaning, such as "Agent is typing", not "Icon".

How to fix

Give the SVG a short text alternative that matches what it means here (technique G94): keep role="img" and point aria-labelledby at a <title> that says "Agent is typing", or use aria-label with the same wording (ARIA6 / ARIA10). Do not leave generic placeholders like "Icon", "image", or "svg" — those are not alternatives (F30). If the graphic is purely decorative because nearby visible text already says the agent is typing, aria-hidden="true" is fine instead. This is different from a missing name (scenario 10): here a name exists, but it does not serve as an alternative.

<svg role="img" aria-labelledby="svgTitle" viewBox="0 0 24 24" width="24" height="24">
  <title id="svgTitle">Agent is typing</title>
  <circle cx="5" cy="12" r="2"/>
  <circle cx="12" cy="12" r="2"/>
  <circle cx="19" cy="12" r="2"/>
</svg>

Outcome

A customer hears something like "Agent is typing, image" and knows to wait for a reply instead of assuming the chat disconnected. Sighted users still see the typing dots.

Who is affected

Screen reader users, and people using text-to-speech or braille, who get a placeholder or wrong name for a live-chat status icon instead of what it means.

Learn more

Related scenarios