Customise radio buttons without compromising accessibility
Here’s a nifty post by Chen Hui Jing where she walks us through her process for making radio buttons accessible via keyboard. I particularly enjoyed this bit where she discusses the four options that are available to us to hide the radio input and replace them with a selection of cards that act like toggles instead:
Most of us mess up the keyboard navigation portion of things when we hide the input element. There are several ways to make something invisible or hidden:
- clip-path: polygon(0 0)
- display: none
- opacity: 0
- visibility: hidden
For custom radios (or checkboxes), option 2 and 4 are not recommended because screen readers won’t be able to read the default radio element. This also prevents us from using the :focus pseudo-element on the hidden input, so those are out of the picture.
Which leaves us with option 1 and option 3. I sort of like option 1, because clip-path is fun. Clip-path creates a clipping region which defines what portion of an element is visible. This clipping region can be a basic shape or a url referencing a clipping path element.
And, while we’re on the topic of styling and accessibility, it’s worth checking out Scott O’Hara’s repo of accessibility-focused styled form components and Dave Rupert’s nutrition cards for accessible components.
Direct Link to Article — Permalink
The post Customise radio buttons without compromising accessibility appeared first on CSS-Tricks.
