Success Criterion 4.1.2
Conformance level A
W3C reference F68

Form Field With No Programmatic Label at All

4.1.2 — Name, Role, Value

Scenario

Setting

An e-book reader's library page

What’s wrong

A form field has no programmatic label — screen readers announce 'edit text' with no idea what to type.

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

Tab to a form field and check its accessible name in DevTools: if none is programmatically determined, it fails.

How to fix

Associate a label with every form field (label for/id pairing (code tying a label to its field), aria-label, or aria-labelledby (code pointing to the element that names it)).

<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 an e-book reader's library page, this barrier is gone for screen-reader and voice-control users who can operate only what the accessibility tree exposes — they can complete the task without hitting this wall.

Who is affected