Difference between revisions of "ARIA Checkbox role"

From Level Access Web Labs
Jump to navigation Jump to search
Line 1: Line 1:
 
<html lang="en">
 
<html lang="en">
<head>
+
  <head>
<title>ARIA Checkbox Example</title>
+
    <title>ARIA Checkbox Example</title>
<style>
+
    <style>
/* This adds 5px of spacing below each fieldset element */
+
/* This adds 5px of spacing below each fieldset element */
fieldset {
+
fieldset {
margin-bottom: 5px;}
+
margin-bottom: 5px;}
</style>
+
</style>
<script type="text/javascript">
+
<script type="text/javascript">
// This function binds the event keycode 32 (space bar) to run the function toggleState
+
// This function binds the event keycode 32 (space bar) to run the function toggleState
// This is needed since the default functionality of a check box is triggered with the space bar
+
// This is needed since the default functionality of a check box is triggered with the space bar
function ARIA_Checkbox_Key(event) {
+
function ARIA_Checkbox_Key(event) {
if(event.keyCode == 32){
+
if(event.keyCode == 32){
toggleState(event.target)
+
toggleState(event.target)
 
}
 
}
 
}   
 
}   
 
+
// This function gets the aria-checked attribute of an element. If it is false, it makes it true and vice versa.
// This function gets the aria-checked attribute of an element. If it is false, it makes it true and vice versa.
+
function toggleState(el) {
function toggleState(el) {
+
var img = el.getElementsByTagName('img')[0],
  var img = el.getElementsByTagName('img')[0],
+
getvalue = el.getAttribute("aria-checked");
getvalue = el.getAttribute("aria-checked");
+
if (getvalue == "false") {
 
+
el.setAttribute("aria-checked", "true");
if (getvalue == "false") {
+
img.setAttribute("src", "https://labs.ssbbartgroup.com/images/1/15/Checked.png");
el.setAttribute("aria-checked", "true");
 
img.setAttribute("src", "https://labs.ssbbartgroup.com/images/1/15/Checked.png");
 
 
} else {
 
} else {
el.setAttribute("aria-checked", "false");
+
el.setAttribute("aria-checked", "false");
img.setAttribute("src", "https://labs.ssbbartgroup.com/images/3/3a/Unchecked.png");
+
img.setAttribute("src", "https://labs.ssbbartgroup.com/images/3/3a/Unchecked.png");
 
}
 
}
 
}
 
}

Revision as of 13:28, 27 March 2014

ARIA Checkbox Example

Standard HTML Checkboxes

Standard checkbox elements using HTML <input> and <label> tags:




ARIA Checkboxes

Checkboxes using ARIA and JavaScript: