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 multiple <input> fields are used to compose a single value (e.g., phone number), each field must have its own accessible name. Screen readers do not infer field purpose from punctuation or surrounding text.

Missing subfield accessible names:

This phone number field is split into three inputs but none of them have accessible names. The label "Phone number:" is not programmatically associated with any of the inputs.


() -

Screen readers will interpret these fields as "edit", "edit", "edit" with no information about what each field means. Some may read punctuation like "(", ")", or "-" as the accessible name.

Note: Possible to implement because automated testing can verify that none of the <input> fields have associated accessible names via <label for>, aria-label, or aria-labelledby.

axe detected: 4.1.2  |  QualWeb detected: 4.1.2