Switch Role Support

Whether you use a <button> or <input type="checkbox"> as the basis for your switch depends on a few factors:

1. Use <button> if:
   • you can count on JavaScript being available, and
   • flipping the switch has an immediate effect.

   Go read Under-Engineered Toggles Too.

2. 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 a switch indicates whether the input is on (true) or off (false). The mixed value is invalid, and user agents MUST treat a mixed value as equivalent to false 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 and switch 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 and switch 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 and switch 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 and switch 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 and switch 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 and switch 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 and switch 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.