Accessible Styled Form Controls

ARIA Switch Demo


Last updated:

Examples of ARIA Switch controls.

Pattern Demos

No labels

Disabled example:

Use legible fonts

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 more 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

Presently there are issues with screen readers and ARIA switches. Please review them to determine if a role=switch will be suitable for your project or if an alternative control may be appropriate, due to better support.

Continue reading

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