Creating custom-designed radio buttons and checkboxes has never been easy. Many developers have found ways of hacking these elements using CSS and JavaScript. but can they also be accessible. The answer is yes, with a little extra effort. This presentation will walk through some simple examples to show how radio buttons and checkboxes can be semantic as well as keyboard/screen-reader accessible.
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.
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.
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.
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.