ARIA Switch Demos

Published: March 20, 2017

Last updated: January 23, 2022

Pattern Demos

<button> base

<span> base

<input type=checkbox> base

Enable dark mode (disabled example)

<div> base

<a> base

Enable something else

Pattern Details

Pattern Markup (before script runs)

<button data-switch
  type="button"
  class="switch-toggle"
  data-switch-labels
  disabled
>
  Dark mode
</button>

<span data-switch class="switch-toggle" hidden>
  Dark mode (no visible state labels)
</span>

<label class="check-switch">
  <input type="checkbox" data-switch data-keep-disabled disabled>
  Enable dark mode
</label>

<div class="on-off-switch" data-switch id="enabler" hidden>
  Enable the next switch
</div>

<a id="target"
  href="#"
  data-keep-disabled
  aria-disabled="true"
  class="on-off-switch"
  data-switch
>
  Enable something else
</a>

Pattern Markup (after script runs)

<button data-switch 
  type="button"
  class="switch-toggle" 
  data-switch-labels 
  role="switch" 
  aria-checked="false"
>
  Dark mode
  <span aria-hidden="true" class="show-labels"></span>
</button>


<span data-switch 
  class="switch-toggle" 
  role="switch" 
  tabindex="0" 
  aria-checked="false"
>
  Dark mode (no visible state labels)
  <span aria-hidden="true"></span>
</span>


<label class="check-switch">
  <input type="checkbox" 
    data-switch 
    data-keep-disabled 
    disabled 
    role="switch"
  >
  Enable dark mode
  <span aria-hidden="true"></span>
</label>


<div class="on-off-switch" 
  data-switch 
  id="enabler" 
  role="switch"
  tabindex="0" 
  aria-checked="false"
>
  Enable the next switch
  <span aria-hidden="true"></span>
</div>


<a id="target" 
  data-keep-disabled 
  aria-disabled="true" 
  class="on-off-switch" 
  data-switch 
  role="switch" 
  tabindex="-1" 
  aria-checked="false"
>
  Enable something else
  <span aria-hidden="true"></span>
</a>

A switch is meant to function similarly to a checkbox or toggle button, but assistive technologies are meant to announce it in a manner that is consistent with its on-screen appearance as an on/off sort of UI component.

This particular pattern uses a <button> as the base element that is then modified into a role="switch" with JavaScript. When a <button> is modified to be exposed as a switch, the aria-checked attribute needs to be added, and managed, to appropriately convey the current state to assistive technologies (AT).

For more information about switches and how AT, such as screen readers, interpret them, please review the checkbox switch pattern.

For more information on the JavaScript and markup used, please see the ReadMe on the GitHub repo for this pattern.

Usage note

Presently there are inconsistencies with screen readers and ARIA switches. Please review them to understand how the role is treated depending on screen reader and browser pairings, and if there are any gaps you may need to consider when considering the use of this role.

Continue reading

For more information about switches, please read the ARIA specification for the switch role. Inclusive Components Toggle Buttons, by Heydon Pickering.