«
»

ARIA Checkbox

Jun 29th, 2011 at 2:45 pm

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


<style>
[aria-checked="true"]  { background-image: url(http://www.donaldevans.com/images/CheckBoxChecked.png); 
background-repeat: no-repeat;}
[aria-checked="false"] { background-image: url(http://www.donaldevans.com/images/CheckBoxNotChecked.png); 
background-repeat: no-repeat;
}
</style>

<script>
function ARIA_Checkbox_Key(event) {	
  if((event.keyCode == 13) || (event.keyCode == 32)){
    ARIA_Checkbox()
  }
}  
function ARIA_Checkbox() {
    var getvalue=document.getElementById("ARIA_Checkbox").getAttribute("aria-checked");
    if (getvalue=="false")
      {
        document.getElementById("ARIA_Checkbox").setAttribute("aria-checked", "true");
        document.getElementById('checkbox_alert').innerHTML = "aria-checked has been set to true.";
    } else {
      document.getElementById("ARIA_Checkbox").setAttribute("aria-checked", "false");
      document.getElementById('checkbox_alert').innerHTML = "aria-checked has been set to false.";
  }
}
</script>

<span id="ARIA_Checkbox" 
  role="checkbox" 
  aria-checked="false"
  onClick= "ARIA_Checkbox();" 
  onkeyup="ARIA_Checkbox_Key(event);"
  tabindex="0">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
<br />
<p id="checkbox_alert" role="alert"></p>

Works With

role=checkbox
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)

In Accessibility. Both comments and pings are currently closed.

Comments are closed.