Accessible custom radio buttons and checkboxes

Web designers and developers have always struggled with how to customise radio buttons and checkboxes.

Diagram: A series of differently styled on/off switches.

The main issue is that these elements are notoriously hard to style - especially across multiple browsers and devices.

In the past, some developers resorted to JavaScript-based solutions to solve this problem.

In some cases this involved using JS to remove the original radio or checkbox element making the end result inaccessible for a wide range of assistive technologies.

However, it is possible to style these elements without having to use JavaScript. And more importantly, we can make the end result accessible.

Let’s take a simple example of an on/oﬀ switch that can be applied to either radio or checkbox elements:

unchecked checked Diagram: Shows the unchecked and checked version of the switch.

The solution I’m about to demo, has four key accessibility features:

Feature 1: Using the intended semantic elements, the input and label elements will be explicitly associated using matching "for" and "id" values.

Feature 2: The label content can used to describe the purpose of each switch for screen readers. This content is hidden off-screen.

Feature 3: The tick icon makes the two different states clearly distinguishable - aiding colour- blind users and some types of cognitive-impaired users.

Feature 4: The switch is keyboard-friendly (operates in the normal way) but we also clearly ﬂag the focus and hover states.

<div class="switch"> <input class="switch__control" type="radio" name="example01" id="example01"> <label class="switch__label" for="example01"> <span class="switch__content">Label content</span> </label> </div> Radio

<div class="switch"> <input class="switch__control" type="checkbox" name="example01" id="example01"> <label class="switch__label" for="example01"> <span class="switch__content">Label content</span> </label> </div> Checkbox

<div class="switch"> <input class="switch__control" type="checkbox" name="example01" id="example01"> <label class="switch__label" for="example01"> <span class="switch__content">Label content</span> </label> </div> ID value “for” values

/* parent module */ .switch { } /* descendants of parent module */ .switch__control { } .switch__label { } .switch__content { }

We can use the parent container to create the overall dimensions of the switch.

switch Diagram: Shows the switch layer as a dotted outline.

The control is then positioned on top of the parent, and set with opacity: 0. This means it exists on the page, and can be interacted with, but it cannot be seen.

switch switch__control Diagram: Shows the control sitting on top of the switch layer.

Then, the label is placed on top of the radio button, and we can style the background of this label to look like a switch.

switch switch__control switch__label Diagram: Shows label sitting on top of the control.

And ﬁnally, the label content is hidden off screen so that it is available for screen readers, but does not clutter the visual appearance of the switch.

Checkbox and radio button elements can be manually changed by users - from unchecked to checked etc.

These elements can also be given boolean “checked” and “disabled” attributes.

<input type="checkbox">  <input type="checkbox" checked>  <input type="checkbox" disabled>

However, for this solution, most of the styling is applied to the label element, rather than the input.

Unfortunately, the label element has no checked, unchecked or disabled state of its own.

We can get around this using adjacent sibling selectors, which target any label element that is adjacent to (comes directly after) the input.

/* unchecked input */ .switch__control + label { } /* checked input */ .switch__control:checked + label { } /* diabled input */ .switch__control[disabled] + label { }

unchecked checked disabled Diagram: Shows the unchecked, checked and disabled version of the switch.

Finally, we also want to style the :focus and :hover states of the switch.

/* unchecked input */ .switch__control:hover + label { } .switch__control:focus + label { } /* checked input */ .switch__control:checked:hover + label { } .switch__control:checked:focus + label { }

This gives us a series of possible results that looks like this:

unchecked hover unchecked focus unchecked checked checked hover checked focus disabled Diagram: Shows variations of the switch.

Demo: https://russmaxdesign.github.io/switch-checkbox/

Russ Weakley Max Design Site: maxdesign.com.au Twitter: twitter.com/russmaxdesign Slideshare: slideshare.net/maxdesign Linkedin: linkedin.com/in/russweakley

Accessible custom radio buttons and checkboxes

In this document

More Related Content

What's hot

Similar to Accessible custom radio buttons and checkboxes

More from Russ Weakley

Recently uploaded

Accessible custom radio buttons and checkboxes