Successfully reported this slideshow.
Your SlideShare is downloading. ×

Accessible custom radio buttons and checkboxes

Accessible custom radio buttons and checkboxes

Download to read offline

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.

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.

More Related Content

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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

×