1. Accessible
custom radio buttons
and checkboxes

2. The pain

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

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

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

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

7. 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.

8. It can be done

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

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

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

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

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

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

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

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

17. HTML/CSS

18. <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

19. <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

20. <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

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

22. How does it work?

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

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

25. 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.

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

27. 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.

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

29. And finally, 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.

30. The problem

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

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

33. <!-- unchecked -->
<input type="checkbox">
<!-- checked -->
<input type="checkbox" checked>
<!-- disabled -->
<input type="checkbox" disabled>

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

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

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

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

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

39. Different states

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

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

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

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

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

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