Overview
A toggle switch is a checkbox variant that signifies states of "on" and "off" instead of "checked" and "unchecked" states. The aria-checked attribute of a switch denotes whether the input is in the "on" state (true) or the "off" state (false).
Semantic Markup
- The toggle switch is a checkbox with the addition of role="switch".
- Toggle switches should be provided with a clear label
WAI-ARIA
- Aria-labels should be used when there is no visible text on the page that can be used to describe the purpose of the element. This can be especially useful for elements that are interactive, such as buttons, links, and form elements, as well as for images that convey meaning but have no alternative text.
- .sr-only class is used to hide an element visually, but keep it accessible to screen readers. It is commonly used to hide elements such as form labels or instructions that are required for a11y, but are not necessary for sighted users.
Keyboard Interactions
|
enter/focus |
When the switch is in focus, it alters the switch's state. |
Further Links