# ARIA Switch Demos

Published: March 20, 2017

Last updated: January 23, 2022

## Pattern Demos

`<button>` base

`<span>` base

Enable dark mode (no visible state labels)

`<input type=checkbox>` base

Enable dark mode (disabled example)

`<div>` base

Enable the next switch

`<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"

      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 .