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: <label> elements only provide accessible names to native form controls like <input> and <textarea>. For custom elements using ARIA roles (like role="textbox"), use attributes like aria-label or aria-labelledby to provide an accessible name.

Non-native textbox missing name:

This <div role="textbox"> element has an empty ("") accessible name. Although it is wrapped in a <label>, this only works for native form fields, so it does not provide an accessible name.


Note: Possible to implement because it can be programmatically detected when a semantic element (like role="textbox") is wrapped in a <label> without an actual accessible name being applied.

axe detected: 4.1.2  |  QualWeb detected: 4.1.2