Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Accessible
custom radio buttons
and checkboxes
The pain
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 f...
It can be done
However, it is possible to style
these elements without having
to use JavaScript. And more
importantly, we can make the
en...
Let’s take a simple example of
an on/off 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...
Feature 2:
The label content can used to
describe the purpose of each
switch for screen readers. This
content is hidden of...
Feature 3:
The tick icon makes the two
different states clearly
distinguishable - aiding colour-
blind users and some type...
Feature 4:
The switch is keyboard-friendly
(operates in the normal way) but
we also clearly flag the focus and
hover states.
HTML/CSS
<div class="switch">
<input
class="switch__control"
type="radio"
name="example01"
id="example01">
<label class="switch__la...
<div class="switch">
<input
class="switch__control"
type="checkbox"
name="example01"
id="example01">
<label class="switch_...
<div class="switch">
<input
class="switch__control"
type="checkbox"
name="example01"
id="example01">
<label class="switch_...
/* parent module */
.switch { }
/* descendants of parent module */
.switch__control { }
.switch__label { }
.switch__conten...
How does it work?
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...
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 finally, the label content is
hidden off screen so that it is
available for screen readers, but
does not clutter the vi...
The problem
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.
<!-- unchecked -->
<input type="checkbox">
<!-- checked -->
<input type="checkbox" checked>
<!-- disabled -->
<input type=...
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
directl...
/* unchecked input */
.switch__control + label { }
/* checked input */
.switch__control:checked + label { }
/* diabled inp...
unchecked
checked
disabled
Diagram: Shows the unchecked, checked and disabled version of the switch.
Different states
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__c...
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 sw...
Demo:
https://russmaxdesign.github.io/switch-checkbox/
Russ Weakley
Max Design

Site: maxdesign.com.au

Twitter: twitter.com/russmaxdesign

Slideshare: slideshare.net/maxdesign
...
Upcoming SlideShare
Loading in …5
×

Accessible custom radio buttons and checkboxes

1,742 views

Published on

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.

Published in: Education

Accessible custom radio buttons and checkboxes

  1. 1. Accessible custom radio buttons and checkboxes
  2. 2. The pain
  3. 3. Web designers and developers have always struggled with how to customise radio buttons and checkboxes.
  4. 4. Diagram: A series of differently styled on/off switches.
  5. 5. The main issue is that these elements are notoriously hard to style - especially across multiple browsers and devices.
  6. 6. In the past, some developers resorted to JavaScript-based solutions to solve this problem.
  7. 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. 8. It can be done
  9. 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. 10. Let’s take a simple example of an on/off switch that can be applied to either radio or checkbox elements:
  11. 11. unchecked checked Diagram: Shows the unchecked and checked version of the switch.
  12. 12. The solution I’m about to demo, has four key accessibility features:
  13. 13. Feature 1: Using the intended semantic elements, the input and label elements will be explicitly associated using matching "for" and "id" values.
  14. 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. 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. 16. Feature 4: The switch is keyboard-friendly (operates in the normal way) but we also clearly flag the focus and hover states.
  17. 17. HTML/CSS
  18. 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. 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. 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. 21. /* parent module */ .switch { } /* descendants of parent module */ .switch__control { } .switch__label { } .switch__content { }
  22. 22. How does it work?
  23. 23. We can use the parent container to create the overall dimensions of the switch.
  24. 24. switch Diagram: Shows the switch layer as a dotted outline.
  25. 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. 26. switch switch__control Diagram: Shows the control sitting on top of the switch layer.
  27. 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. 28. switch switch__control switch__label Diagram: Shows label sitting on top of the control.
  29. 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. 30. The problem
  31. 31. Checkbox and radio button elements can be manually changed by users - from unchecked to checked etc.
  32. 32. These elements can also be given boolean “checked” and “disabled” attributes.
  33. 33. <!-- unchecked --> <input type="checkbox"> <!-- checked --> <input type="checkbox" checked> <!-- disabled --> <input type="checkbox" disabled>
  34. 34. However, for this solution, most of the styling is applied to the label element, rather than the input.
  35. 35. Unfortunately, the label element has no checked, unchecked or disabled state of its own.
  36. 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. 37. /* unchecked input */ .switch__control + label { } /* checked input */ .switch__control:checked + label { } /* diabled input */ .switch__control[disabled] + label { }
  38. 38. unchecked checked disabled Diagram: Shows the unchecked, checked and disabled version of the switch.
  39. 39. Different states
  40. 40. Finally, we also want to style the :focus and :hover states of the switch.
  41. 41. /* unchecked input */ .switch__control:hover + label { } .switch__control:focus + label { } /* checked input */ .switch__control:checked:hover + label { } .switch__control:checked:focus + label { }
  42. 42. This gives us a series of possible results that looks like this:
  43. 43. unchecked hover unchecked focus unchecked checked checked hover checked focus disabled Diagram: Shows variations of the switch.
  44. 44. Demo: https://russmaxdesign.github.io/switch-checkbox/
  45. 45. Russ Weakley Max Design Site: maxdesign.com.au Twitter: twitter.com/russmaxdesign Slideshare: slideshare.net/maxdesign Linkedin: linkedin.com/in/russweakley

×