Accessible names for form fields (form-field-accessible-name)

Form fields and interactive components must have accessible names provided via aria-label, aria-labelledby, visible text content, or associated <label> elements.

Note: Elements with role="menuitemcheckbox" must have an accessible name. Hiding the label text using aria-hidden="true" prevents it from being used as a name. Instead, use aria-label, aria-labelledby, or ensure the text is not hidden from assistive technologies.

Menuitemcheckbox missing accessible name:

These menuitemcheckbox elements do not have accessible names. The visible text "Ketchup" and "Mayonnaise" is wrapped in <aria-hidden="true">, so it is not used as a name by assistive technologies.


Add one or more dip:


Note: Possible to implement because it can be programmatically detected when a menuitemcheckbox has no accessible name and its adjacent label text is hidden with aria-hidden="true".

axe detected: 4.1.2  |  QualWeb detected: 4.1.2