aria-toggle-field-name

Description

The aria-toggle-field-name rule ensures that toggle fields (elements with roles such as checkbox, radio, menuitemcheckbox, menuitemradio, or switch) have an accessible name that describes what is being toggled. Without an accessible name, screen reader users cannot determine the purpose of the control.

This rule meets WCAG requirements by:

1. Providing Programmatic Names (WCAG 4.1.2 Name, Role, Value): It ensures that the name of each toggle control can be programmatically determined by assistive technologies so users understand what they are enabling or disabling.
2. Conveying Information and Relationships (WCAG 1.3.1 Info and Relationships): It ensures the relationship between a toggle control and its visible label is programmatically exposed, not just conveyed through visual proximity.

To comply with this rule, every toggle field must be associated with a descriptive label using a <label> element, aria-label, or aria-labelledby.

Examples

This example shows a checkbox with no associated label. A screen reader announces the element only as “checkbox”, giving the user no information about what it controls.

Here, a visible label is associated with the checkbox using the <label> element, so screen readers announce “Subscribe to newsletter, checkbox”.

How to fix?

To fix violations of the aria-toggle-field-name rule, follow these steps:

• Associate each toggle control with a visible <label> element by linking them with matching for and id attribute values.

• Alternatively, wrap the toggle control inside a <label> element so the label text is implicitly associated.

• If a visible label is not possible, add an aria-label attribute directly on the toggle element, or use aria-labelledby to reference a visible element on the page that describes the control.

Reference

• WCAG Success Criterion 4.1.2: Name, Role, Value

• WCAG Success Criterion 1.3.1: Info and Relationships