Label fields with their adjacent buttons
Where a button sits next to an input, carries a clear text label, and acts on that input, W3C accepts the button as the field's label. G167 is that arrangement. It exists so a search box does not need the word Search printed twice, and buttons labeling a single text field usually come after it. This is a sufficient technique for 3.3.2 Labels or Instructions at Level A, with no conditions on it, which is unusual in that group. One requirement travels with it and W3C states it in a note. The field still has to have a programmatically determined name of its own, under the Level A rule about name, role and value. So the visible labeling is done by the button, and the accessible name is still your job.
How we find it in an audit
Our reviewers listen to the field with a screen reader before looking at the layout. If it announces as 'edit' and nothing more, the visual arrangement has fixed nothing. We check the button too. An icon-only magnifying glass with no text is not a label for anything, and it leaves both the field and the button unnamed.
How affected users experience it
Screen readers announce a text field and its name, not the thing sitting next to it. An unlabeled input beside an unlabeled icon button is two mysteries in a row. The user has to type something and see what happens. Naming the input and giving the button real text removes the guesswork for them and for voice control users, who need a word to say out loud.
Passes vs. fails
Passes
The adjacent button reads 'Search', and the input carries the matching name, as in <input type="text" aria-label="Search"> beside <button>Search</button>.Fails
An unlabeled text field sits beside a magnifying-glass icon button with no text, so both the purpose and the name are guesses.
Other ways to satisfy this rule
17 guides on this site are filed under 3.3.2 Labels or Instructions. W3C lists this one as sufficient for that rule on its own. Implement it correctly, in a way your readers' software actually supports, and the rule is met.
- 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 G167: Using an adjacent button to label the purpose of a field. 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.