Customise radio buttons without compromising accessibility

rfp-robotRFP ROBOT: Website Request for Proposal Generator

The time has come for a new website (or website redesign), which means you need to write a website request for proposal or web RFP. A Google search produces a few examples, but they vary wildly and don’t seem to speak really to your goals for developing or redesigning a new website. You need to write a website RFP that will clearly articulate your needs and generate responses from the best website designers and developers out there. But how?

Have no fear, RFP Robot is here. He will walk you through a step-by-step process to help you work through the details of your project and create a PDF formatted website design RFP that will provide the information vendors need to write an accurate bid. RFP Robot will tell you what info you should include, point out pitfalls, and give examples.

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 — PermalinkThe post Customise radio buttons without compromising accessibility appeared first on CSS-Tricks.
Source: CssTricks

Posted on September 10, 2018 in css, custom, Drupal Developer, drupal developer austin, Drupal Development, Expert Drupal Development, navigation, radio, The, Web Design Services

Share the Story

Back to Top