Accessible Styled Form Controls

ARIA Switch Demo

Last updated:

Examples of ARIA Switch buttons.

Pattern Demo

Item 2

Item 3 (purposefully disabled)

Item 4 (purposefully missing aria-label)

Item 5

Pattern Details

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 becomes a switch, the aria-checked attribute needs to be added, and managed, to appropriately convey the current state to screen reader users.

For a more traditional visual style of a switch UI, as well as further information about switches and how screen readers interpret them, please review the checkbox switch pattern.

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

Usage note

There are various issues with screen readers and ARIA switches listed in the README. Please review them before using this pattern to create switch components.

Continue reading

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