It’s now easier than ever to style form controls without sacrificing semantics and accessibility:
The reason is that we can finally style the ::before and ::after pseudo-elements on the
<input>tag itself. This means we can keep and style an
<input>and won’t need any extra elements. Before, we had to rely on the likes of an extra
<span>, to pull off a custom design.
The demo is really nice. And best of all, you can wrap all of these CSS enhancements in a feaure query:
Hopefully, you’re seeing how nice it is to create custom form styles these days. It requires less markup, thanks to pseudo-elements that are directly on form inputs. It requires less fancy style switching, thanks to custom properties. And it has pretty darn good browser support, thanks to
Like Brad, I switched to Firefox for web browsing and Duck Duck Go for searching quite a while back. I highly recommend it.
Use a toggle switch if you are:
- Applying a system state, not a contextual one
- Presenting binary options, not opposing ones
- Activating a state, not performing an action
For full hipster points, make sure you’re using these services, and then casually drop them into conversation by saying “Yeah, it’s a pretty obscure service; you probably haven’t heard of it…”
Sara shows a few different approaches to building accessible toggle switches:
Always, always start thinking about the markup and accessibility when building components, regardless of how small or simple they seem.
Photos of analogue interfaces: switches, knobs, levers, dials, buttons, so many buttons.
One of the accessibility features built into OS X:
Using Switch Control, and tapping a small switch with his head, my son tweets, texts, types emails, makes FaceTime calls, operates the TV, studies at university online, runs a video-editing business using Final Cut Pro on his Mac, plays games, listens to music, turns on lights and air-conditioners in the house and even pilots a drone!
I remember a talk and discussion at SxSW a few years back about trying to improve the efficiency of trade networks by making them more web-like: there are ships full of empty cargo containers, simply because companies insist on using the container with their logo on it. I really, really like the idea of applying the principles of packet-switching to physical networks.
But here’s the hard part:
The technology is not a problem. We could do it all in 10 years. It’s the business models and the mental models in people’s minds.
A micro campaign to get people using switched extension blocks, you know four ways, multi plug sockets, this kind of thing, with switches