• 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 

<svg viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5z"/></svg>
<label>Company size</label>
<!-- the svg marks the field as required, but has no accessible name -->

Why it matters

A registrant using a screen reader can't tell which fields are mandatory, and may submit an incomplete form only to get a confusing rejection.

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 an informative SVG a role and an accessible name. Without role="img" plus aria-label (or a referenced title), assistive tech announces nothing or reads raw path data.

<svg role="img" aria-label="Required" viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5z"/></svg>
<label>Company size <span class="visually-hidden">required</span></label>

Outcome

A registrant hears "Company size, required" and fills in every mandatory field without a failed submission.

Who is affected

Screen reader users filling out multi-field registration forms rely on that signal to complete every required field the first time.

Learn more

Related scenarios