Customizing Checkboxes and Radio Boxes for Accessibility

Accessibility Best Practices for Custom Checkboxes and Radio Boxes

Have you ever been filling out a form on a web page and experienced the simple pleasure of a thoughtfully designed checkbox or radio button? Perhaps the checkmark animates as it is drawn onto the box. Or maybe the radio button is simply customized to match the website’s brand colors. Bold or subtle, customizing the drab default inputs on a site can leave a positive impression on the user.

For starters, replacing a default input with a custom design increases the overall brand cohesiveness on a page. The default gray inputs can often seem jarring on an otherwise thoughtfully designed website.

More to that point: it just shows that every element on that site, no matter how small, has been considered by the designers and developers who created it. When done well, custom checkboxes and radio buttons can just be plain fun. Users will remember being delighted by a new experience on the web.

There’s just one thing though… there isn’t a way to customize these inputs! (At least not yet.)

 

 

Making Custom Checkboxes and Radio Buttons Accessible

When we talk about customizing checkboxes and radio buttons, we are replacing them with an image or graphic element that visually shows the checked / unchecked state in its place.

Now, you may think this is splitting hairs and is merely a matter of semantics. However, depending on how you hide the default input in favor of a custom solution, you may be hiding the input entirely from users who rely on a screen reader, navigate with a keyboard, or have low vision.

Fun designs that are inaccessible are bad designs.

So why bother?! Well, it’s quite simple to achieve both form and function regarding accessible customized checkboxes and radio buttons. There are just a few additional considerations you need to consider to ensure your design is fully inclusive.

 

The Problem with Hiding Default Web Page Elements with CSS

Here is where that extra consideration comes in: how to hide the default input without taking away its usability? Let’s review the most common ways to hide elements on a web page using CSS, and how each affects accessibility:

• display: none
• visibility: hidden
• opacity: 0
• clip-path: inset(100%)

The first two options remove the element from the DOM and accessibility tree, making it completely inaccessible. A keyboard user would never get the option to check the box, and a screen reader wouldn’t know anything was there to check. Therefore, we need to use one of the latter two options for our accessible checkboxes.

 

How to Replace a Checkbox with an SVG

For this tutorial, we’re going to go through the process of replacing a checkbox with an SVG. Let’s start by laying out the concept for what we’re trying to achieve. To keep the checkbox accessible we want to:

• Hide the default checkbox visually, but make sure it still functions as a checkbox would
• Show the SVG in place of the hidden checkbox, but functionally hide it from a screen reader and tabbing navigation
• Ensure both take up the same visual space so they can work together

 

Setting Up HTML Markup for Accessibility

First things first: let’s go over how we’re going to set up the HTML markup to achieve our solution outlined above. While not strictly necessary, placing your SVG inside the label, right after the input, increases the clickable area, making it more usable. We can then use sibling selectors to modify the SVG visually based on the input’s checked state.

The other consideration is how to hide the SVG from a screen reader and remove it from the DOM order. There are 2 attributes we can use to do this:

• hidden
• aria-hidden

These are quite similar, but there is one important difference: the hidden attribute essentially works the same as display: none in CSS. And since we only want it functionally hidden and not visually, we will add the aria-hidden attribute to our SVG.

 

CSS to Inclusively Customize Checkboxes and Radio Buttons

Now, let’s put this all together. There are just a few easy lines of CSS to add in order to make the checkbox above meet the standards we’ve outlined above.

In summary, we will:

• Set the checkbox to position: absolute so that it is removed from the page flow, and doesn’t visually take up any space
• If necessary, position it to match the SVG that is replacing it. In theory, you want the checkbox to be on top of that image or element
• Similar to above, set the dimensions of the checkbox to visually match the image it is on top off
• Once you’re satisfied with the positioning, set the checkbox to opacity: 0 to visually hide it

And that’s it! The default checkbox is now invisibly on top of the SVG, functioning just like a checkbox should, and toggling the state of the SVG using plain old CSS. You can use these basic principles in several scenarios to inclusively customize checkboxes and radio buttons.

See the Pen
Accessibility Best Practices for Custom Checkboxes/Radio Buttons by BNP Engage (@bnpengage)
on CodePen.

 

The Importance of Accessible Design

As fun as these elements are, just remember that if they aren’t accessible to all, it’s not good design. Always consider the vast number of ways users will be interacting with your content when rolling out new functionality, no matter how small! Your users will appreciate your thoughtfulness and remember the delight of a new experience.

When developing websites for accessibility, it helps to have an expert guiding you through the process. At BNP Engage, we specialize in building accessible websites that all users can interact with. Contact us today to learn more and craft a more inclusive website.