control-with-no-label

This fails the run. Where it is wrong about your code, // ramonda-check-ignore <reason> on the line says so, and the reason is printed on every run.

Reported when a form control has no label, no aria-label, no aria-labelledby and no title, so nothing says what it is for.

Every other element can be worked out from what is inside it. A control cannot: an input is an empty box, and the only thing saying whether it wants an email address or a postcode is its label. Any text sitting beside it looks like a label to somebody using a mouse and is attached to nothing.

Four ways to fix it, in the order worth reaching for. A <label htmlFor={id}> beside the control, which also makes clicking the words focus the field. A <label> wrapped around both. An aria-labelledby naming text already on the page. Or aria-label where there is genuinely nothing visible to point at — a search box whose only marking is an icon.

A placeholder is not a label and is not counted as one: it disappears the moment somebody types, taking the only description of the field with it.

Next

• All rules — the other checks this one runs beside.
• Checking your app — how to run it, and what it proves.