Bug - Switch - Inaccessible design pattern and implementation #6347
Description
Describe the problem
The Switch component does not meet the following accessibility requirement:
Success Criterion 2.5.3 Label in Name (Level A)
This requirement states that the visible label and the accessible label should either match or have the visible label used as the beginning of the accessible label. The reason for this is that some screen reader users are sighted users, and seeing text on the screen that does not match the text they hear presents a usability issue.
How do you reproduce the problem?
Slightly different issues are present in the react vs HTML examples, but both are problematic.
- HTML example — The
aria-labelledbyvalue always references thetruelabel, but then the switch state isfalse, the visible label and the accessible name do not match - React example — The
aria-labeledbyvalue always references the visible label. This means that as the state is switched fromtruetofalsethe label also changes to the opposite meaning. For example, the switch either says "visible is true" or "hidden is false" resulting in the false state being communicated with a double negative.
Expected behavior
Since the switch is implemented using a checkbox form input to manage the selection state, it should follow the same rules that we use when using checkboxes:
- the label should not change based on the selection state
- the label should always describe the behavior or value when the checked state is true
Metadata
Metadata
Assignees
Type
Projects
Status