ARIA9Sufficient technique WCAG 1.1.1 WCAG 3.3.2 Level A Partly scanner-detectable

Assemble one label from several text pieces

Some controls have their label scattered across the sentence they sit in. Extend session by, then a box, then minutes. aria-labelledby takes a list of ids and joins the text in the order you list it, so the field's name becomes the whole phrase. W3C lists ARIA9 as sufficient for 1.1.1 Non-text Content outright, and as sufficient for 3.3.2 Labels or Instructions in combination with the general technique of providing descriptive labels. Include the control's own id in the list where its value belongs in the phrase. The harder case, and the one worth learning the technique for, is a table of inputs, where each cell's name has to be stitched from its row header and its column header before it means anything.

How we find it in an audit

Broken id references are automated. Word order is not. We listen to the assembled name and check it reads as the sentence a sighted user sees. The ids are joined in the order you wrote them, so a list in the wrong order produces a name that is technically present and practically nonsense.

How affected users experience it

Without the association, the field announces as edit, twenty, and the words on either side of it are separate scraps of text heard before and after. The person has to hold three fragments in their head and guess the relationship. With the label assembled, they hear Extend session by 20 minutes, edit, once, complete, at the moment they arrive.

Passes vs. fails

Passes: name, role, and state exposed. Fails: a control with no identity.

Passes

<span id="ext-a">Extend session by</span>
<input id="mins" type="text" value="20" aria-labelledby="ext-a mins ext-b">
<span id="ext-b">minutes</span>

Fails

Extend session by <input id="mins" type="text" value="20"> minutes

How this gets tested

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

Element marked as decorative is not exposedA tool can check this
Image accessible name is descriptiveA tool finds candidates, you decide
Image button has non-empty accessible nameA tool can check this
Image has non-empty accessible nameA tool can check this
Link has non-empty accessible nameA tool can check this
Object element rendering non-text content has non-empty accessible nameA tool can check this
SVG element with explicit role has non-empty accessible nameA tool can check this
Image not in the accessibility tree is decorativeA tool can check this

Other ways to satisfy this rule

39 guides on this site are filed under 1.1.1 Non-text Content. 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.

This guide is our interpretation of W3C technique ARIA9: Using aria-labelledby to concatenate a label from several text nodes. 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.