ARIA1Sufficient technique WCAG 1.3.1 WCAG 3.3.2 Level A Partly scanner-detectable

Attach help text to inputs with aria-describedby

aria-describedby points a control at the id of the element holding its hint text, and assistive technology reads that text as the field's description, after the name. The label says what the field is. The description says how to fill it in. W3C lists ARIA1 as sufficient for 3.3.2 Labels or Instructions in combination with the general technique of providing descriptive labels, so the pair passes rather than the attribute alone, and it also lists the attribute as advisory for structure. Two limits are built in. The value is a list of ids, so one control can point at several elements, and every one of those ids has to be an element in the same document. Help text living in a CMS field or on a separate help page cannot be referenced this way at all.

How we find it in an audit

A dangling reference is a pure automated find. An aria-describedby pointing at an id that does not exist anywhere on the page produces silence, and a scanner sees it instantly. What a person has to do is read the referenced text, because a description that repeats the label adds a second announcement and no information.

How affected users experience it

A password field with a visible rule underneath it looks complete on screen. Read by ear with no association, the field announces as Password, edit, and the rule is a stray paragraph somewhere after it, heard once on the way past and gone by the time typing starts. With aria-describedby, the rule arrives attached to the field, at the moment it matters, and again on the way back if the entry gets rejected.

Passes vs. fails

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

Passes

<label for="pw">Password</label>
<input id="pw" type="password" aria-describedby="pw-hint">
<p id="pw-hint" class="hint">Must be 12+ characters with one number.</p>

Fails

<label for="pw">Password</label>
<input id="pw" type="password">
<p class="hint">Must be 12+ characters with one number.</p>

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

The other techniques filed under this rule

52 guides on this site are filed under 1.3.1 Info and Relationships. W3C lists this one as advisory for that rule rather than sufficient, which means it helps real readers without being accepted as evidence you conformed.

This guide is our interpretation of W3C technique ARIA1: Using the aria-describedby property to provide a descriptive label for user interface controls. 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.