• 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 

<span>Search your library</span>
<input type="text" id="librarySearch" placeholder="Title or author">
<!-- the span is not a label, and it isn't linked to the input with "for" -->

Why it matters

A screen reader user tabbing to the search box hears only "edit text" and has no idea it searches their library.

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

Match the label's "for" attribute to the input's id, or wrap the input inside the label element.

<label for="librarySearch">Search your library</label>
<input type="text" id="librarySearch" placeholder="Title or author">

Outcome

A reader hears "Search your library, edit text" and types an author's name right away.

Who is affected

Screen reader users and voice-control users searching their book collection cannot identify the field's purpose.

Learn more

Related scenarios