Switch Example

This example illustrates implementation of the switch design pattern for a notification preferences control. It uses a div element for the switch and CSS borders to provide graphical rendering of switch states.

Example

Notifications

Accessibility Features

Keyboard Support

Key Function
Tab
  • Moves keyboard focus to the switch.
Space
Enter
  • Toggle switch between on and off.

Role, Property, State, and Tabindex Attributes

Role Attribute Element Usage
switch div Identifies the div element as a switch.
tabindex="0" div Includes the switch in the page Tab sequence.
aria-checked="false" div
  • Indicates the switch is off.
  • CSS attribute selectors (e.g. [aria-checked="false"]) are used to synchronize the visual states with the value of the aria-checked attribute.
aria-checked="true" div
  • Indicates the switch is on.
  • CSS attribute selectors (e.g. [aria-checked="true"]) are used to synchronize the visual states with the value of the aria-checked attribute.
aria-hidden="true" span.on and span.off
  • Removes the strings on and off that appear to the right of the switch from the accessible name of the switch.
  • These strings are included only for enhancing visual comprehension of the state; element states are not permitted in accessible names.

Javascript and CSS Source Code

HTML Source Code