Toggle Switch

<div class="toggle-container">
  <span>Dark Mode</span>
  <div class="toggle" onclick="toggleDarkMode()">
    <div class="toggle-thumb"></div>
  </div>
</div>

<label class="toggle-switch">
  <input
    type="checkbox"
    role="switch"
    aria-checked="false"
    id="dark-mode-toggle"
  >
  <span class="toggle-track">
    <span class="toggle-thumb"></span>
  </span>
  <span class="toggle-label">Dark Mode</span>
</label>

label.toggle-switch
  input(
    type="checkbox"
    role="switch"
    aria-checked="false"
    id="dark-mode-toggle"
  )
  span.toggle-track
    span.toggle-thumb
  span.toggle-label Dark Mode

const [isDarkMode, setIsDarkMode] = useState(false);

<label className="toggle-switch">
  <input 
    type="checkbox" 
    role="switch"
    aria-checked={isDarkMode}
    checked={isDarkMode}
    onChange={() => setIsDarkMode(!isDarkMode)}
  />
  <span className="toggle-track">
    <span className="toggle-thumb"></span>
  </span>
  <span className="toggle-label">Dark Mode</span>
</label>

<label class="toggle-switch">
  <input 
    type="checkbox" 
    role="switch"
    :aria-checked="isDarkMode"
    v-model="isDarkMode"
  >
  <span class="toggle-track">
    <span class="toggle-thumb"></span>
  </span>
  <span class="toggle-label">Dark Mode</span>
</label>

<label class="inline-flex items-center gap-3 cursor-pointer">
  <input 
    type="checkbox" 
    role="switch"
    aria-checked="false"
    class="sr-only peer"
  >
  <span class="relative w-11 h-6 bg-slate-200 rounded-full peer-checked:bg-indigo-600 transition-colors">
    <span class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full shadow-sm transition-transform peer-checked:translate-x-5"></span>
  </span>
  <span class="text-slate-700 font-medium">Dark Mode</span>
</label>

The Standard

A toggle switch is a specialized control that represents an on/off state. Unlike checkboxes (which are for selection), switches are for immediate actions. Use role="switch" and aria-checked to communicate the state.

WCAG Criteria

• 2.1.1 Keyboard (Level A): Toggles must be operable via keyboard.
• 4.1.2 Name, Role, Value (Level A): The switch role and checked state must be announced.
• 1.4.11 Non-text Contrast (Level AA): The track/thumb must have 3:1 contrast.

❌ The Bad (Inaccessible)

What’s Wrong?

1. No Keyboard Access: A <div> with onclick cannot receive focus.
2. No Role: Screen readers don’t know this is a toggle control.
3. No State: Users cannot tell if it’s currently on or off.
4. No Label Association: The “Dark Mode” text is not connected to the control.

✅ The Good (Accessibility-Ready Code)

Why This Works

1. Checkbox Foundation: Uses a real <input type="checkbox"> for native keyboard support.
2. Switch Role: role="switch" tells screen readers this is a toggle, not a checkbox.
3. State Exposed: aria-checked announces the current on/off state.
4. Label Wrapping: The <label> element connects the text to the control.

<label>
  <input type="checkbox" role="switch" aria-checked="true">
  <span>Allow Cookies</span>
</label>

Technical Deep Dive

The Accessibility Tree

Role: switch
Name: "Dark Mode"
State: checked / unchecked

Screen Reader Announcements

• VoiceOver (Mac): “Dark Mode, switch, off”
• NVDA: “Dark Mode, switch, not pressed”

Focus Flow

1. Tab Key: Captures focus on the hidden checkbox.
2. Space Key: Toggles the checked state.
3. State Sync: aria-checked updates before visual animation completes.

CSS Technique

The visual toggle is created using CSS on the .toggle-track and .toggle-thumb elements, while the actual <input> is visually hidden but remains in the accessibility tree.