<html> <head> <title>ARIA Checkbox</title> <script type="text/javascript" > /* * @method public getTarget() - helper function to extract the element which fired the event from the event object. * @param event - event object * @return - the appropriate target based on the varibles supported in the event object. */ function getTarget(event) { var target = null; if (event.target) { target = event.target; } else if (event.srcElement) { target = event.srcElement; } return target; } /******************* End of wrapper functions **********************/ var CHECK = "checked.gif"; var UNCHECK = "unchecked.gif"; var MIXED = "mixed.gif"; var ELEMENT_NODE = 1; // IE does not understand Node.ELEMENT_NODE nor nodeObj.ELEMENT_NODE // Mouse and keyboard event handlers for controls function checkBoxEvent(event) { var bEventContinue = true; // Browser can still use event try { if ((event.type == "click" && event.button == 0) || (event.type == "keydown" && event.keyCode == 32)) { // Toggle checkbox var checkbox = getTarget(event); var checkImg = null; // event could be coming from img if (checkbox.nodeType == ELEMENT_NODE && checkbox.tagName.toUpperCase() == "IMG") { checkImg = checkbox; checkbox = checkbox.parentNode; } else { //event coming from span for (var i=0; i < checkbox.childNodes.length; i++) { checkImg = checkbox.childNodes[i]; if (checkImg.nodeType == ELEMENT_NODE && checkImg.tagName.toUpperCase() == "IMG") { break; } } } if (checkbox.getAttribute("aria-checked") == "true") { checkbox.removeAttribute("aria-checked"); checkImg.src = UNCHECK; } else { checkbox.setAttribute("aria-checked", "true"); checkImg.src = CHECK; } bEventContinue = false; // Do not continue propagating event } } catch (error) { bEventContinue = true; } return bEventContinue; } function tristateCheckBoxEvent(event) { var bEventContinue = true; // Browser can still use event try { if ((event.type == "click" && event.button == 0) || (event.type == "keydown" && event.keyCode == 32)) { // Toggle checkbox var checkbox = getTarget(event); var checkImg = null; // event could be coming from img if (checkbox.nodeType == ELEMENT_NODE && checkbox.tagName.toUpperCase() == "IMG") { checkImg = checkbox; checkbox = checkbox.parentNode; } else { //event coming from span for (var i=0; i < checkbox.childNodes.length; i++) { checkImg = checkbox.childNodes[i]; if (checkImg.nodeType == ELEMENT_NODE && checkImg.tagName.toUpperCase() == "IMG") { break; } } } if (checkbox.getAttribute("aria-checked") == "true") { checkbox.removeAttribute("aria-checked"); checkImg.src = UNCHECK; } else if (checkbox.getAttribute("aria-checked") == "mixed") { checkbox.setAttribute("aria-checked", "true"); checkImg.src = CHECK; } else { checkbox.setAttribute("aria-checked", "mixed"); checkImg.src = MIXED; } bEventContinue = false; // Do not continue propagating event } } catch (error) { bEventContinue = true; } return bEventContinue; }; //]]> </script> </head> <body> <p>Here's a checkbox that you can click on.</p> <div> <span role="checkbox" aria-checked="true" tabindex="0" onkeydown="return checkBoxEvent(event);" onclick="return checkBoxEvent(event);" > <img src="checked.gif" role="presentation" alt="" /> Include decorative fruit basket </span> </div> <div> <span role="checkbox" aria-checked="true" aria-invalid="true" tabindex="0" onkeydown="return checkBoxEvent(event);" onclick="return checkBoxEvent(event);" > <img src="checked.gif" role="presentation" alt="" /> Invalid checkbox </span> </div> <div> <span role="checkbox" aria-checked="true" aria-required="true" tabindex="0" onkeydown="return checkBoxEvent(event);" onclick="return checkBoxEvent(event);" > <img src="checked.gif" role="presentation" alt="" /> Required checkbox </span> </div> <div> <span role="checkbox" aria-checked="true" aria-required="true" tabindex="0" onkeydown="return tristateCheckBoxEvent(event);" onclick="return tristateCheckBoxEvent(event);" > <img src="checked.gif" role="presentation" alt="" /> Tri-state checkbox </span> </div> <p> <a href="/web/20110104115538/http://www.google.com/">Random Google link</a> </p> </body> </html>