Under-Engineered Toggles
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.
I think the most interesting thing about Adrian’s post is just how flexible his approach is to handle any situation, including color schemes and writing modes. He also takes note of the indeterminate checkbox, that state that’s nether on or off, but something perhaps in between. We have a CSS pseudo-selector for that and it could warrant a post its own, given that it’s a purely visual state that cannot be set in the HTML and needs to be registered via JavaScript. It’s interesting to think of an “in between” state for a switch and Adrian’s use case for the default state Airplane Mode is pretty compelling.
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.
Direct Link to Article — Permalink
The post Under-Engineered Toggles appeared first on CSS-Tricks.
