ARIA Toolbar

From Level Access Web Labs
Revision as of 18:48, 26 March 2014 by Javila (talk | contribs) (Created page with " <html> <head> <style type="text/css"> .tb { float:left; margin: .5em; } #tool { outline: solid thin blue; border: solid thin black; height:2em; } #tool:focus .acti...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search


<html> <head> <style type="text/css"> .tb {

 float:left;
 margin: .5em;

}

  1. tool {
 outline: solid thin blue;
 border: solid thin black;
 height:2em;

}

  1. tool:focus .active {
 outline: solid thin gray;

}

.nonactive {
 outline: none;

} </style> <script type="text/javascript"> function handleEvent(evt) { evt = evt || window.event; var str = document.getElementById("tool").getAttribute('aria-activedescendant'); var val = str.charAt(1);


if (evt.keyCode == 37)

 val = parseInt(val) -1;

else if (evt.keyCode == 39)

 val = parseInt(val) +1;

if (val < 0)

 val = 3;

else if (val > 3)

 val = 0;
 document.getElementById("tool").setAttribute('aria-activedescendant','a'+val);
 document.getElementById(str).className = "tb";
 document.getElementById('a'+val).className = "tb active";

} </script> </head> <body>

</body>