aria-toggle-field-name

Description

All ARIA toggle fields should have an accessible name associated with them. These accessible names ensure that screen readers and other assistive technologies can accurately identify the element.

Whenever you use semantic elements like a checkbox, menu, switch, etc., ensure that these elements have an accessible name defined.

Example

In the following example, the checkbox doesn’t have a name associated with it. Without a name or label, screen readers and other assistive technologies can’t identify the checkbox properly. This can cause issues when the user tries to toggle the value of this checkbox. Such inaccessible toggle elements break the aria-toggle-field-name rule.

In contrast, the following code snippet uses an aria-label to name the checkbox. You can also name the checkbox without using the aria-label attribute. Users of screen readers and other assistive technologies can access this checkbox easily as it has a proper name. Hence, this code snippet doesn’t break the aria-toggle-field-name rule.

How to fix?

If you have semantic toggle elements (checkbox, radio, radiogroup, menu, menuitemcheckbox, menuitemradio, switch, etc.) on your webpage, use any of the following options to name them:

• Assign a name to the element while declaring it.
• Use aria-label to name the element.
• Use aria-labelledby, if applicable, to name the element.
• Use the title attribute, if applicable, to name the element.

Reference

• WCAG 4.1.2: Name, Role, Value
• aria-label HTML attribute
• aria-labelledby HTML attribute