F86Documented failure WCAG 4.1.2 Level A Partly scanner-detectable

Do not leave parts of a split field nameless

One label sits over the first of three boxes and the other two carry nothing, which is how almost every split phone field ships. F86 is the failure technique for it, so a match is a defect rather than a shortcut. Those boxes are not really nameless either, and that is the part that stings. Some assistive technology takes the nearest text in front of a field as its name, so a phone number split by punctuation hands the user fields called a parenthesis, a parenthesis and a dash. Names here do not have to be visible. They have to reach assistive technology, which is the difference between this failure and the one about the group's own label, where the label does have to be seen.

How we find it in an audit

We read the accessibility tree rather than the markup, because the markup usually looks reasonable. Each part of a split field gets checked for a name of its own, and the standard result is one named box beside two anonymous ones. Card numbers split into four inputs, dates split into three, and postcodes split into two all get the same treatment, since the failure is about multi-part fields rather than about telephones. Where a name exists but came from punctuation, the finding quotes what the screen reader actually said.

How affected users experience it

A screen-reader user reaches the second box and hears a parenthesis read aloud, then edit text. That is the whole instruction. There is no way to know whether this box wants three digits or four, or whether the number being copied off a card fits the shape the form expects, so they type something, tab, and find out at the end. Voice-control users cannot address the box at all, because there is no name for them to say.

Passes vs. fails

Passes: a label that stays put. Fails: placeholder-only fields.

Passes

<fieldset><legend>Phone</legend>
  <input aria-label="Area code" size="3">
  <input aria-label="Prefix" size="3">
  <input aria-label="Line number" size="4">
</fieldset>

Fails

<label for="p1">Phone</label>
<input id="p1" size="3"> <input size="3"> <input size="4">

How this gets tested

The W3C publishes test rules that define what a checker looks for here.

Image button has non-empty accessible nameA tool can check this
Link has non-empty accessible nameA tool can check this
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
Role attribute has valid valueA tool can check this
ARIA state or property is permittedA 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

23 guides on this site are filed under 4.1.2 Name, Role, Value. 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.

This guide is our interpretation of W3C technique F86: Failure of Success Criterion 4.1.2 due to not providing names for each part of a multi-part form field, such as a US telephone number. 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.