Disabled example:Use legible fonts
A switch is meant to function similarly to a checkbox or toggle button, but assistive technologies are meant to announce it in a manner that is consistent with its on-screen appearance as an on/off sort of UI component.
This particular pattern uses a
button as the base element that is then modified into a
button becomes a switch, the
aria-checked attribute needs to be added, and managed, to appropriately convey the current state to screen reader users.
For more information about switches and how screen readers interpret them, please review the checkbox switch pattern.
Presently there are
issues with screen readers and ARIA switches.
Please review them to determine if a
role=switch will be suitable for your project
or if an alternative control may be appropriate, due to better support.
For more information about this switches, please read the ARIA specification for the switch role. Inclusive Components Toggle Buttons, by Heydon Pickering.