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: Visible <label> elements (using for attribute or wrapping the input) or aria-label, aria-labelledby and title are all valid attributes for providing accessible names for <input> elements.

Input with empty aria-label:

This <input> element has an empty accessible name because the value of the aria-label attribute is a space, which is trimmed:


Note: Possible to implement because it can be programmatically determined when an aria-label contains only whitespace, which results in an empty accessible name. The solution is to provide a meaningful non-empty label.

axe detected: 4.1.2  |  QualWeb detected: 4.1.2