Success Criterion 4.1.2
Conformance level A
W3C reference F89

Icon-Only Control With No Name Exposed to Assistive Tech

4.1.2 — Name, Role, Value

Scenario

Setting

A crowdfunding platform's campaign page

What’s wrong

A link or button whose only content is an image has no accessible name — screen readers announce 'link' with no clue where it goes.

Example

<div class="checkbox" onclick="toggle()"></div>

Why it matters

Screen-reader and voice-control users who can operate only what the accessibility tree exposes.

How to test

Inspect an image-only link/button in DevTools: if its accessible name is empty, it fails.

How to fix

Give the image inside the link/button alt text that states the destination or action.

<input type="checkbox" id="opt-1">

<label for="opt-1">Email notifications</label>

A native input exposes its role and checked state automatically; a styled div exposes none of that without a lot of manual ARIA.

Outcome

On a crowdfunding platform's campaign page, this barrier is gone for screen-reader and voice-control users who can operate only what the accessibility tree exposes — they can finish what they came here to do.

Who is affected