Switch: Switch is missing appropriate roles and/or attributes
custom-switch
Rule
The name, role, value, states, and properties of user interface components MUST be programmatically determinable by assistive technologies.
Background
Every user interface control must have a role along with any applicable states and properties so that screen reader users know how to interact with the control. Native HTML elements - such as <button>, <a>, <input>, <select> - already have a role, and their necessary states and properties - such as the checked/unchecked state of a checkbox - are automatically conveyed so nothing more needs to be done. If you create a custom version of a native HTML element or a custom control or widget that does not have a native HTML equivalent, you must add the relevant role(s) and any applicable states and properties using ARIA as well as expected keyboard interactions.
How to Fix
A switch is an input widget that allows users to choose one of two values: on or off. Switches are similar to checkboxes and toggle buttons. 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.
Fix this issue by doing ONE of the following:
- Follow the ARIA switch design pattern including expected keyboard interactions at: https://www.w3.org/WAI/ARIA/apg/patterns/switch/
- Use an HTML or ARIA checkbox.
- Use an ARIA toggle button