Accessible custom radio buttons and checkboxes
5 likes3,434 views
The document discusses the challenges of styling custom radio buttons and checkboxes to ensure accessibility across different browsers and devices. It outlines a solution that uses semantic elements with key accessibility features, such as associating input and label elements, providing off-screen label content for screen readers, and ensuring keyboard-friendliness. Additionally, it provides code examples and styling techniques to enhance the visual appearance of these controls without compromising accessibility.
![/* unchecked input */
.switch__control + label { }
/* checked input */
.switch__control:checked + label { }
/* diabled input */
.switch__control[disabled] + label { }](https://image.slidesharecdn.com/ozewai-radio-checkbox-161128074416/85/Accessible-custom-radio-buttons-and-checkboxes-37-320.jpg)
Accessible custom radio buttons and checkboxes
- 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.
- 45. Russ Weakley Max Design Site: maxdesign.com.au Twitter: twitter.com/russmaxdesign Slideshare: slideshare.net/maxdesign Linkedin: linkedin.com/in/russweakley