ARIA’s role="checkbox"
allows the developer a lot of options when it comes to creating an accessible checkbox. When applied properly, the ARIA role="checkbox"
can turn any element into a checkbox, including, p, div, span, img, and others.
In this case we have applied the role="checkbox"
to an HTML SPAN element. Since the SPAN element does not have a keyboard equivilent to onClick, we will also create a simple keyboard handler to look for the ENTER key (keyCode=”13″) or the SPACEBAR key (keycode=”32″).
Example 1:
Code
Works With
Browser | Screen Reader | Results |
---|---|---|
IE 9 | JAWS 12 | Yes |
FF 4 | JAWS 12 | Yes |
Standards:
- WCAG 2.0 SC 1.3.1 Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)
- 2.1.1 Keyboard: All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user’s movement and not just the endpoints. (Level A)
- WCAG 2.0 SC 4.1.2 Name, Role, Value: For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies. (Level A)