Toggles. Switches. Whatever you want to call them, they’ve been with us for some time and have been a dominant a staple for many form interfaces. They’re even baked right into many CSS frameworks, including Bootstrap and Foundation.
It’s easy to think of them in binary terms: on and off. Off and on. Click to change the state and call it a day, right? I mean, it’s just a checkbox with a styled visual representation.
Well, Adrian Roselli shows us that there’s a lot more to think about. And, not only that, but he shows how we can under-engineer them:
I am only going to provide styles to visually convert a standard checkbox into a visual toggle. No ARIA, no script, no special features. A progressively enhanced checkbox that will continue to work if the CSS file does not load
There’s a lot to digest here. His approaches to accessibility run the gamut, from hover, active, focus and disabled states to contrast in both light and dark modes, and many things in between. What’s particularly key is the progressive enhancement he mentions in that quote above.
It’s an awful lot of work that we have to do to ensure that the front-end is designed well and I think this post is the best example I’ve seen in a while as to why our work is not a problem to be solved and more of a challenge to better understand the tools of our craft.
from CSS-Tricks http://adrianroselli.com/2019/03/under-engineered-toggles.html