Hint text must be linked to its field

Rule form-field-description-linked · Forms · impact serious · Static + live

↩ Back to the rules index · WCAG cross-reference

Why it matters#

A hint such as "Must be at least 12 characters" only reaches a screen-reader user if the field points at it. Sitting next to the input in the markup is not enough: focus jumps straight from the label to the box, the hint is never read, and the requirement only surfaces as an error after the form is submitted.

How to fix#

Give the hint an id and reference it from the field with aria-describedby. The hint is then announced after the label, before the user types.

Example#

<label for="p">Password</label><input id="p" type="password"><span class="hint">At least 12 characters</span>

<label for="p">Password</label><input id="p" type="password" aria-describedby="p-h"><span class="hint" id="p-h">At least 12 characters</span>

WCAG success criteria#

4.1.2 Name, Role, Value — Level A#

Every UI component must expose a correct name, role, and (where relevant) state/value to assistive technology.

Understanding 4.1.2

Standards#

This rule contributes to the following standards:

WCAG A EN 301 549

References#

• WCAG — Name, Role, Value