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.