Do not leave labeled controls without a name
The word Quantity sits above the box in plain sight, and nothing in the code ties the two together, so the control has no name at all. F111 is the failure technique for that, and a match is a defect rather than a technique. Three checks make it up. The control has a visible label, the control has an accessible name, and the name contains the visible text. F111 is the middle check failing, which means no name whatsoever. Where a name does exist and says something other than the label, that is a different failure with its own page. The repair is smaller than it sounds, too. The words are already written and already on the screen, so this is a matter of connecting a label to its control rather than of writing anything new.
How we find it in an audit
Every control showing a visible label gets read out of the accessibility tree, and the only question is whether a name came back at all. Divs and spans doing a label's job are the usual source, because they look right on the screen and connect to nothing underneath. Custom components get extra attention, since a wrapper often holds the visible text while the real input sits two levels down with nothing attached to it. Each finding quotes the visible words, so whoever picks up the ticket knows what the name should say.
How affected users experience it
A screen-reader user hears edit text and nothing more, while the word telling everybody else what to type sits two pixels above it. Voice-control users get the sharper version, because their whole method is saying the visible word out loud and there is nothing behind it to match. Click Quantity does nothing at all. The label is right there on the screen, read by everyone except the software that needed it most.
Passes vs. fails
Passes
<label for="qty">Quantity</label>
<input type="number" id="qty">Fails
<div>Quantity</div>
<input type="number">How this gets tested
The W3C publishes test rules that define what a checker looks for here.
- ARIA attribute is defined in WAI-ARIAA tool can check this
- ARIA state or property has valid valueA tool can check this
- Element with role attribute has required states and propertiesA tool can check this
- Form field has non-empty accessible nameA tool can check this
- Headers attribute specified on a cell refers to cells in the same table elementA tool can check this
- Role attribute has valid valueA tool can check this
- ARIA global properties not used where prohibitedA tool can check this
- ARIA required context roleA tool can check this
- ARIA required owned elementsA tool can check this
- ARIA state or property is permittedA tool can check this
- Table header cell has assigned cellsA tool can check this
- Visible label is part of accessible nameNothing implements this yet
- Image button has non-empty accessible nameA tool can check this
- Link has non-empty accessible nameA tool can check this
- Button has non-empty accessible nameA tool can check this
- Element with aria-hidden has no content in sequential focus navigationA tool can check this
- Element with presentational children has no focusable contentA tool can check this
- Menuitem has non-empty accessible nameA tool can check this
- Summary element has non-empty accessible nameA tool can check this
- Iframe element has non-empty accessible nameA tool can check this
- Iframe elements with identical accessible names have equivalent purposeA tool finds candidates, you decide
The other techniques filed under this rule
52 guides on this site are filed under 1.3.1 Info and Relationships. W3C documents this one as a failure of that rule, so it describes a way the rule gets broken rather than a way to pass it.
- ARIA11sufficientAdd landmarks so users can skip around
- ARIA12sufficientUse role=heading when h1-h6 is impossible
- ARIA13sufficientName repeated landmarks so they are distinguishable
- ARIA16sufficientName controls from visible text with aria-labelledby
- ARIA17sufficientGroup related form fields with ARIA roles
- ARIA20sufficientMark leftover page areas with role=region
This guide is our interpretation of W3C technique F111: Failure of Success Criteria 1.3.1, 2.5.3, and 4.1.2 due to a control with visible label text but no accessible name. W3C publishes its techniques as guidance rather than as the standard, and says so on every one of them. The success criterion is what conformance is measured against, and a technique is one documented way to meet it.