Components
Switch
Switch allows users to choose between two options by turning something on or off.
What you need to check
The field must have a visible label.
Screen readers must present the label, description, and error messages when the field receives focus.
You can use Field to connect the label, description, and error messages.
The field must have a clear accessible name that matches the visible label.
The accessible name must contain the visible text that describes the field. This allows users of speech recognition and screen readers to refer to the field using the same name shown on screen.
Required fields must be clearly marked.
Users must easily understand which fields must be filled in. Follow the pattern for required and optional form fields.
Error messages must be clearly linked to the correct field and explain how to fix the error.
The error message must make it clear which field contains an error, what is wrong, and how the user can fix it. Avoid generic messages such as “Error” or “Invalid value”. Use specific messages instead, for example “The email address must contain @”.
See the pattern for user-triggered error messages for recommendations on when and how error messages should be shown.
WCAG: 3.3.1 Error Identification (W3C) and 3.3.3 Error Suggestion (W3C)
role="switch"
We use role="switch" to inform screen readers that this is a toggle switch. This allows screen readers to tell the user that it is a switch and that it can be turned on and off. We do not add aria-checked because it is not necessary when the switch is an input with type="checkbox".
Test with a Keyboard
Verify that you can
- reach the switch using Tab
- turn the switch on and off using both Space and Enter
- move to the next element using Tab