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: For semantic elements such as <div role="textbox">, the inner text is treated as the value of the element, not as its accessible name. To provide a name, use aria-label or aria-labelledby.

Textbox with value as name:

This <div role="textbox"> element has an empty ("") accessible name. Its text content "first name" is interpreted as the field's value, not as its accessible name.


first name

Note: Possible to implement because it can be programmatically detected when a non-native textbox has text content but no accessible name via aria-label or aria-labelledby.

axe detected: 4.1.2  |  QualWeb detected: 4.1.2