Skip to main content
No Result Found

aria-toggle-field-name

Severity: Serious

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.

Incorrect sample with inaccessible checkbox
Copy icon Copy

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.

Correct sample with accessible checkbox
Copy icon Copy

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

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked





Thank you for your valuable feedback

Is this page helping you?

Yes
No

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked





Thank you for your valuable feedback!

Talk to an Expert
Download Copy Check Circle