How to Build An Accessible Toggle Switch with Modern HTML & CSS (and Without JavaScript)



This content originally appeared on DEV Community and was authored by Tiny Octopus

So your designer has designed a great looking UI with toggle switches, and has handed it over to you to build. You want to make sure it’s accessible – so now what?

A toggle switch is a great way for users to interact with state in your website or app which can be switched on or off, but how can build great UI while keeping your app accessible?

Building an accessible toggle switch without JavaScript

Browser vendors have worked hard to make web accessible, so let’s not reinvent the wheel.

This great codepen by @pankucins is a great example of using


This content originally appeared on DEV Community and was authored by Tiny Octopus