Accessible names for form fields (form-field-accessible-name)

Form fields and components must have clear accessible names, using attributes like aria-label, aria-labelledby, title, or standard <label> elements.

Note: When a label is associated only with the first of several inputs that form a single data value (e.g., phone number), assistive technologies may incorrectly assume the label applies to all parts, leaving the remaining fields unnamed.

Partially labeled subfields:

In this example, only the first input field has an accessible name via a <label>. The second and third input fields lack accessible names.


() -

Assistive technology users may believe the first field is for the full phone number and will experience the next two fields as unnamed inputs.

Note: Possible to implement because testing can detect that a group of inputs are visually/form-wise related (e.g., grouped with punctuation) but only one has an accessible name. Remaining fields should also have programmatically defined labels.

axe detected: 4.1.2  |  QualWeb detected: 4.1.2