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 using the for attribute only apply to native form controls such as <input> and <textarea>. For non-native elements like <div role="textbox">, use aria-label or aria-labelledby to provide an accessible name.

Non-native textbox with for label:

This <div role="textbox"> element has an empty ("") accessible name. The <label> with a for attribute does not associate with it, because this only works with native form elements.


Note: Possible to implement because it can be programmatically detected when a non-native element (like role="textbox") is referenced by a label for attribute but does not receive an accessible name as a result.

axe detected: 4.1.2  |  QualWeb detected: 4.1.2