Item 3 (purposefully disabled)
Item 4 (purposefully missing aria-label)
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 a more traditional visual style of a switch UI, as well as further information about switches and how screen readers interpret them, please review the checkbox switch pattern.
There are various issues with screen readers and ARIA switches listed in the README. Please review them before using this pattern to create switch components.
For more information about this switches, please read the ARIA specification for the switch role. Inclusive Components Toggle Buttons, by Heydon Pickering.