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 ArticlePermalink

The post Customise radio buttons without compromising accessibility appeared first on CSS-Tricks.