Do not split a phone field and drop the label
Three small boxes for one phone number, with punctuation printed between them and no label over the set. F82 is the failure technique for that, so a match is a defect rather than a pattern to copy. What makes it land is the name each box ends up with. A field takes its label from the nearest text in front of it, so the three fields get named after a parenthesis, a parenthesis and a dash. Labeling each box Area code, Prefix and Line number does not close it either. The set needs a label of its own, and that label has to be visible, because this rule serves people with cognitive disabilities as much as screen-reader users and a name only the accessibility API can read never reaches them. Instructions count as well. Whether you want the country code, and whether the leading zero stays, belongs on the form rather than in the error message.
How we find it in an audit
We look first for a visible label sitting over the whole group, because that is the check the technique actually makes. Then each part gets tested for its own name, and then the instructions get read for the things a person can only guess at, like country codes and leading zeros. A fieldset with a legend answers all three at once, which is why it is the pattern we recommend. Where an aria-label is quietly doing the group's work, we still raise it, since the test asks for a label a person can see.
How affected users experience it
A screen-reader user tabs into the first box and hears a parenthesis read aloud, then edit text. The next one is another parenthesis. The third is a dash. Nothing anywhere in that sequence says phone number, so the shape of the answer has to be inferred from punctuation and the fact that the boxes are short. People with cognitive disabilities meet the same problem from the other end, where the boxes are perfectly visible and the rules for filling them are not, so they type the number the way they say it out loud and the form rejects it without explaining.
Passes vs. fails
Passes
<fieldset><legend>Phone number, including area code</legend>
<p id="tel-hint">10 digits, no country code.</p>
<label for="area">Area code</label> <input id="area" size="3" aria-describedby="tel-hint">
<label for="prefix">Prefix</label> <input id="prefix" size="3">
<label for="line">Line number</label> <input id="line" size="4">
</fieldset>Fails
(<input size="3">) <input size="3">-<input size="4">The other techniques filed under this rule
17 guides on this site are filed under 3.3.2 Labels or Instructions. 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.
- ARIA1sufficientAttach help text to inputs with aria-describedby
- ARIA9sufficientAssemble one label from several text pieces
- ARIA17sufficientGroup related form fields with ARIA roles
- G83sufficientTell users which required fields they missed
- G89sufficientShow the expected format with an example
- G131sufficientWrite labels that describe their fields
This guide is our interpretation of W3C technique F82: Failure of Success Criterion 3.3.2 by visually formatting a set of phone number fields but not including a text label. 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.