The APG Switch Pattern states the following:
Since switch, checkbox, and toggle button all offer binary input, they are often functionally interchangeable. Choose the role that best matches both the visual design and semantics of the user interface. For instance, there are some circumstances where the semantics of "on or off" would be easier for assistive technology users to understand than the semantics of "checked or unchecked", and vice versa.
Currently, the ToggleSwitch component uses a checkbox input under the hood, so screen readers will refer to the switch as a checkbox. We may want to add role="switch" to make the semantics match the design more closely.
- Determine if screen reader UX is improved by adding role="switch"
The switch pattern makes sense to use here, and improve the UX of a screen reader. For a ToggleSwitch with the label "show details," the user will now hear "Show details, off, switch" rather than "Show details, unchecked checkbox"
- If so, make the change