Skip to content

Switch Example

Read This First

The code in this example is not intended for production environments. Before using it for any purpose, read this to understand why.

This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.

About This 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.

Similar examples include:

Example

Notifications

Accessibility Features

  • To make understanding the state of the switch easier for users with visual or cognitive disabilities, a text equivalent of the state (on or off) is displayed adjacent to the graphical state indicator. CSS attribute selectors ensure the label displayed is synchronized with the value of the aria-checked attribute.
    NOTE: To prevent redundant announcement of the state by screen readers, the text indicators of state are hidden from assistive technologies with aria-hidden.
  • Spacing, border widths and fill are important to ensure the graphical states are visible and discernible to people with visual impairments, including when browser or operating system high contrast settings are enabled:
    • To make the graphical representation of the state of a switch readily perceivable, two pixel borders are used for the switch state container and a solid color is used for the fill of the circles indicating the on and off states.
    • To ensure users can perceive the difference between the container and the circles used to indicate the state of the switch, there are two pixels of space between the container border and the circles.
  • To enhance perceivability when operating the switches, visual keyboard focus and hover are styled using the CSS :hover and :focus pseudo-classes:
    • To make it easier to perceive focus and the relationship between a label and its associated switch, focus creates a border around both the switch and the label and also changes the background color.
    • To make it easier to perceive that clicking either the label or switch will activate the switch, the hover indicator is the same as the focus indicator.
    • To help people with visual impairments identify the switch as an interactive element, the cursor is changed to a pointer when hovering over the switch.
    • Note: Because transparent borders are visible on some systems with operating system high contrast settings enabled, transparency cannot be used to create a visual difference between the element that is focused an other elements. Instead of using transparency, the focused element has a thicker border and less padding. When an element receives focus, its border changes from zero to two pixels and padding is reduced by two pixels. When an element loses focus, its border changes from two pixels to two and padding is increased by two pixels.

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

Back to Top