• 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

The registration form marks required fields with an SVG icon, but the <svg> has no accessible name: no role="img", no aria-label, and no <title> referenced by aria-labelledby. A screen reader gets nothing that says the field is required (1.1.1).

Watch on YouTube (captions available)

Example 

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

Why it matters

A registrant using a screen reader may not learn which fields are mandatory. They can submit an incomplete form and hit a confusing rejection, or abandon the webinar signup.

How to test

Find SVG icons that convey meaning — required markers, logos, status icons. In the browser's accessibility tree (DevTools), an informative SVG should have the role img (or another image-like role) and a non-empty name. Check for aria-label, or a <title> (or other text) referenced with aria-labelledby. A bare <svg> with only paths and no name fails. role="img" with an empty name also fails. Then listen with a screen reader: you should hear the label, such as "required", not silence where the icon sits.

How to fix

Give the informative SVG a short text alternative (techniques G94 and ARIA6): put role="img" and aria-label="required" on the <svg>, or point aria-labelledby at a <title> inside it. role="img" makes the graphic one image that can carry a name, and it improves support across browser and screen reader combinations. Do not also add visually hidden text that repeats the same word — one clear name is enough. If the icon is purely decorative because nearby text or the required / aria-required state already says everything, aria-hidden="true" on the SVG is fine instead. A required attribute on the input still helps, but it does not replace a name on an informative icon.

<label for="company-size">Company size
  <svg role="img" aria-label="required" viewBox="0 0 24 24" width="16" height="16"><path d="M12 2L2 7l10 5 10-5z"/></svg>
</label>
<input id="company-size" name="company-size" type="text" required>

Outcome

A registrant hears something like "Company size, required" and fills every mandatory field without a failed submission. Sighted users still see the icon.

Who is affected

Screen reader users, and people using text-to-speech or braille, who miss a required-field cue that exists only as an unnamed SVG icon.

Learn more

Related scenarios