• Success Criterion 4.1.2
  • Conformance level A

Accessible Name Computed as Meaningless Icon or Code Text

4.1.2 — Name, Role, Value

Scenario

Setting

A telehealth app's video-visit waiting room

What’s wrong

Names computed as junk: icon ligature text ("&#xe5cd. "), SVG path noise, or "button button".

Example 

<button class="mic-btn"><i class="material-icons">mic</i></button>
<button class="cam-btn" aria-label="button"><span class="icon-camera"></span></button>
<!-- the icon font ligature "mic" becomes the first button's accessible name;
     the second button's aria-label is the meaningless word "button" -->

Why it matters

A patient joining a video visit hears "mic, button" or just "button, button" and cannot tell mute from camera.

How to test

Check the computed accessible name in DevTools: if it's junk (icon-font ligature characters, raw SVG path text, or duplicated words like 'button button'), it fails.

How to fix

Hide the icon glyph from assistive tech with aria-hidden and give the button its own real aria-label.

<button class="mic-btn" aria-label="Mute microphone"><i class="material-icons" aria-hidden="true">mic</i></button>
<button class="cam-btn" aria-label="Turn off camera"><span class="icon-camera" aria-hidden="true"></span></button>

Outcome

A patient mutes their microphone before the doctor joins, guided by a clear spoken label.

Who is affected

Screen reader users joining a telehealth appointment cannot identify the mute or camera controls before it starts.

Learn more

Related scenarios