Switch Role Support
Whether you use a <button>
or <input type="checkbox">
as the basis for your switch depends on a few factors:
- Use
<button>
if:- you can count on JavaScript being available, and
- flipping the switch has an immediate effect.
Go read Under-Engineered Toggles Too.
- Use
<input type="checkbox">
if:- you want to progressively enhance the control, and
- flipping the switch will only take effect when the user submits it.
Go read Under-Engineered Toggles.
Those two posts show you how to accessibly style your pill-like controls. Whether you follow any of that advice, use any of those styles, or ignore it all completely is mostly irrelevant from here out. All this post cares about is what happens once you add the switch
role.
Normally, both aria-checked
and aria-pressed
allow for a mixed
value. With the switch
role, however, you are restricted to aria-checked
and only the values true
or false
. The mixed
value is invalid on the switch
role in the current ARIA spec and into the ARIA 1.3 Editor’s Draft.
The
aria-checked
attribute of aswitch
indicates whether the input is on (true
) or off (false
). Themixed
value is invalid, and user agents MUST treat amixed
value as equivalent tofalse
for this role.
Test Case
As always, the example pen is available in debug mode for you to test with your favorite assistive technology. You should do that, especially since these results will be out of date as soon as a new release of anything comes out. I also did not test with voice control, though it generally cares little for ARIA.
There are no styles other than to indicate the buttons’ states. This post only cares about how the controls are exposed to screen reader users through the browser’s accessibility tree.
See the Pen Toggles by Adrian Roselli (@aardrian) on CodePen.
Testing
None of ARC, Axe, or Wave flag a mixed
value when used with a switch
role. Neither does the HTML validator. See my post Beware False Negatives for why I bother to mention this.
I left the screen reader instructions for each control in the following output. It is interesting to see how the instructions change depending on control types and roles.
Chrome 94 with JAWS 2021
Chrome exposes aria-checked="mixed"
on a switch
role as “true”, which is against the specification. Interaction instructions are not offered for the switches (you do not need to provide them). Generally unrelated to this post, be careful using aria-checked
on a native checkbox, as Scott O’Hara notes in a Chromium bug report.
- Checkbox
- Hammer check box checked. To check press Spacebar.
- Sandwich check box not checked. To check press Spacebar.
- Animal check box partially checked. To check press Spacebar.
- Button with
aria-pressed
- Hot Dog Toggle button Pressed. To toggle the state press spacebar.
- Drill Toggle button. To toggle the state press spacebar.
- Vegetable Toggle button partially checked. To toggle the state press spacebar.
- Checkbox with
switch
role- Taco Switch Pressed On.
- Wrench Switch Off.
- Mineral Switch partially checked Off.
- Button with
aria-checked
andswitch
role- Panino Switch Pressed On.
- Pliers Switch Off.
- General Switch Pressed On.
Firefox 93 with NVDA 2021.2
Firefox exposes aria-checked="mixed"
on a checkbox with the switch
role as “mixed”, which is against the specification. Firefox does not expose the switch
role, always announcing it as a checkbox.
- Checkbox
- Hammer check box checked
- Sandwich check box not checked
- Animal check box half checked
- Button with
aria-pressed
- Hot Dog toggle button pressed
- Drill toggle button not pressed
- Vegetable toggle button not pressed half checked
- Checkbox with
switch
role- Taco check box checked
- Wrench check box not checked
- Mineral check box half checked
- Button with
aria-checked
andswitch
role- Panino check box checked
- Pliers check box not checked
- General check box not checked
Narrator (Windows 10) with Edge 94
Edge exposes aria-checked="mixed"
on a button with the switch
role as “true”. Edge exposes aria-checked="mixed"
on a checkbox with the switch
role as “mixed”. Both of these are against the specification.
- Checkbox
- Hammer check box checked
- Sandwich check box unchecked
- Animal check box indeterminate
- Button with
aria-pressed
- Hot Dog button on
- Drill button off
- Vegetable button indeterminate
- Checkbox with
switch
role- Taco switch on
- Wrench switch off
- Mineral switch indeterminate
- Button with
aria-checked
andswitch
role- Panino switch on
- Pliers switch off
- General switch on
TalkBack 9.1 (Android 11) with Chrome 94
TalkBack with Chrome announces aria-checked="mixed"
on a checkbox with the switch
role as “partially checked”, and on a button with the switch
role as “checked”, both of which are against the specification. Interestingly, TalkBack notes you can toggle all controls, unless they are a checkbox in a mixed state, then you “activate” it.
- Checkbox
- checked, Hammer, checkbox. Double-tap to toggle.
- not checked, Sandwich, checkbox. Double-tap to toggle.
- partially checked, Animal, checkbox. Double-tap to activate.
- Button with
aria-pressed
- on, Hot Dog, toggle button. Double-tap to toggle.
- off, Drill, toggle button. Double-tap to toggle.
- partially checked, Vegetable, toggle button. Double-tap to toggle.
- Checkbox with
switch
role- checked, Taco, switch. Double-tap to toggle.
- not checked, Wrench, switch. Double-tap to toggle.
- partially checked, Mineral, switch. Double-tap to activate.
- Button with
aria-checked
andswitch
role- checked, Panino, switch. Double-tap to toggle.
- not checked, Pliers, switch. Double-tap to toggle.
- checked, General, switch. Double-tap to toggle.
TalkBack 9.1 (Android 11) with Firefox 93
TalkBack with Firefox announces a standard mixed checkbox as “not checked”. It also announces all buttons with aria-pressed
as “switch”, though they do not have that role, and TalkBack does not announce their value.
- Checkbox
- checked, Hammer, check button. Double-tap to toggle.
- not checked, Sandwich, check button. Double-tap to toggle.
- not checked, Animal, check button. Double-tap to toggle.
- Button with
aria-pressed
- Hot Dog, switch, Hot Dog. Double-tap to activate.
- Drill, switch, Drill. Double-tap to activate.
- Vegetable, switch, Vegetable. Double-tap to activate.
- Checkbox with
switch
role- checked, Taco, switch. Double-tap to toggle.
- not checked, Wrench, switch. Double-tap to toggle.
- not checked, Mineral, switch. Double-tap to toggle.
- Button with
aria-checked
andswitch
role- checked, Panino, switch, Panino. Double-tap to toggle.
- not checked, Pliers, switch, Pliers. Double-tap to toggle.
- not checked, General, switch, General. Double-tap to toggle.
VoiceOver (iOS 14.8) with Safari 14
VoiceOver announces a standard mixed checkbox as “unchecked”, and any other control with aria-pressed="mixed"
or aria-checked="mixed"
as “unchecked”. VoiceOver also announces a button with aria-pressed="mixed"
as a checkbox. Finally, VoiceOver announces nothing as a switch. Scott O’Hara filed a WebKit bug in early 2019.
- Checkbox
- Hammer, checkbox, checked. Double-tap to toggle setting.
- Sandwich, checkbox, unchecked. Double-tap to toggle setting.
- Animal, checkbox, unchecked. Double-tap to toggle setting.
- Button with
aria-pressed
- Hot Dog, toggle button, pressed. Double-tap to toggle setting.
- Drill, toggle button, not pressed. Double-tap to toggle setting.
- Vegetable, checkbox, mixed. Double-tap to toggle setting.
- Checkbox with
switch
role- Taco, check box, checked. Double-tap to toggle setting.
- Wrench, check box, unchecked. Double-tap to toggle setting.
- Mineral, checkbox, unchecked. Double-tap to toggle setting.
- Button with
aria-checked
andswitch
role- Panino, check box, checked. Double-tap to toggle setting.
- Pliers, check box, unchecked. Double-tap to toggle setting.
- General check box, unchecked. Double-tap to toggle setting.
VoiceOver (macOS 11.4) with Safari 14.1.1
VoiceOver announces a standard mixed checkbox as “unchecked”. Scott O’Hara filed another WebKit bug almost two weeks ago identifying it as a regression. Otherwise Safari/VO handles switch
correctly, and far better than its iOS/iPadOS cousin.
- Checkbox
- Hammer, checked, checkbox, Checkbox. You are currently on a checkbox. To select or deselect this checkbox, press Control-Option-Space.
- Sandwich, unchecked, checkbox, Checkbox. You are currently on a checkbox. To select or deselect this checkbox, press Control-Option-Space.
- Animal, unchecked, checkbox, Checkbox. You are currently on a checkbox. To select or deselect this checkbox, press Control-Option-Space.
- Button with
aria-pressed
- Hot Dog, selected, toggle button, Button with aria-pressed. You are currently on a toggle button. To select or deselect this checkbox, press Control-Option-Space.
- Drill, toggle button, Button with aria-pressed. You are currently on a toggle button. To select or deselect this checkbox, press Control-Option-Space.
- Vegetable, mixed, toggle button, Button with aria-pressed. You are currently on a toggle button. To select or deselect this checkbox, press Control-Option-Space.
- Checkbox with
switch
role- Taco, on, switch, Checkbox with switch role. You are currently on a switch. To select or deselect this checkbox, press Control-Option-Space.
- Wrench, off, switch, Checkbox with switch role. You are currently on a switch. To select or deselect this checkbox, press Control-Option-Space.
- Mineral, off, switch, Checkbox with switch role. You are currently on a switch. To select or deselect this checkbox, press Control-Option-Space.
- Button with
aria-checked
andswitch
role- Panino, on, switch, Button with aria-checked and switch role. You are currently on a switch. To select or deselect this checkbox, press Control-Option-Space.
- Pliers, off, switch, Button with aria-checked and switch role. You are currently on a switch. To select or deselect this checkbox, press Control-Option-Space.
- General, off, switch, Button with aria-checked and switch role. You are currently on a switch. To select or deselect this checkbox, press Control-Option-Space.
Verdict
The switch
role does not allow mixed states. Ensure your switch never gets set to a mixed state, otherwise, well, problems.
Switches do not always announce as switches. It may be worth keeping this in mind for documentation — both for developers and end users.
The best performers for switches are TalkBack 9.1 / Android 11 with Firefox 93 (though buggy with toggled buttons and mixed native checkboxes) and VoiceOver / macOS 11.4 with Safari 14.1.1 (though buggy with mixed native checkboxes). The worst are Firefox 93 with NVDA 2021.2 (it does not announce them as switches, and is wrong with mixed buttons) and VoiceOver / iOS 14.8 with Safari 14 (it does not announce them as switches, and is wrong with mixed buttons and checkboxes).
I am naming these because Safari is both the best (desktop) and the worst (mobile) and Firefox is also both the best (mobile) and the worst (desktop). This should drive home the point that a browser should not be expected to perform the same on mobile and desktop, even for the same version.
If you are trying to figure out which approach is right for you, well, I don’t know. I’m not your dad.
Leave a Comment or Response