Difference between revisions of "ARIA Menu"

From Level Access Web Labs
Jump to navigation Jump to search
 
(21 intermediate revisions by 4 users not shown)
Line 1: Line 1:
 +
This example is not working correctly.
 +
 
<html lang="en">
 
<html lang="en">
 
   <head>
 
   <head>
Line 20: Line 22:
 
       display:none;
 
       display:none;
 
     }
 
     }
.focus {
+
    .focus {
  outline: dotted;
+
    outline: dotted;
}
+
    }
 
   </style>
 
   </style>
 
   <script type="text/javascript">
 
   <script type="text/javascript">
Line 28: Line 30:
 
       var e = window.event ? window.event : evt;
 
       var e = window.event ? window.event : evt;
  
obj = e.target;
+
            obj = e.target;
toggle(obj,1);
+
            toggle(obj,1);
 
     }
 
     }
  
function visible(obj) {
+
        function visible(obj) {
if (window.getComputedStyle(obj,null).display == "none")
+
            if (window.getComputedStyle(obj,null).display == "none")
return false;
+
                return false;
else
+
            else
  return true;
+
              return true;
}
+
        }
  
// set force to 1 to force only that one to be displayed
+
        // set force to 1 to force only that one to be displayed
 
     function toggle(obj, force) {
 
     function toggle(obj, force) {
  
if (obj.tagName == "SPAN")
+
                if (obj.tagName == "SPAN")
  obj = obj.parentNode;
+
                  obj = obj.parentNode;
  
    if (obj.id == "l1" || obj.id == "l2") {
+
            if (obj.id == "l1" || obj.id == "l2") {
    obj = obj.children[1]
+
                obj = obj.children[1]
      }
+
          }
  
      if (obj.tagName == "UL") {
+
          if (obj.tagName == "UL") {
    if (force) {
+
                if (force) {
var o = document.getElementsByClassName('menu')
+
                        var o = document.getElementsByClassName('menu')
for (var i=0; i < o.length; i++) {
+
                        for (var i=0; i < o.length; i++) {
  
  o[i].style.display = "none";
+
                          o[i].style.display = "none";
}
+
                        }
      obj.style.display = "block";
+
                  obj.style.display = "block";
        }
+
            }
    else if (!visible(obj))
+
                else if (!visible(obj)) {
      obj.style.display = "block";
+
                  obj.style.display = "block";
    else
+
                  obj.setAttribute("aria-expanded","true");
    obj.style.display = "none";
+
                  obj.querySelector("li").focus();
      }
+
                }
      else if (obj.tagName == "LI") {
+
                else
        obj.onclick();
+
                    obj.style.display = "none";
      }
+
          }
 +
          else if (obj.tagName == "LI") {
 +
            obj.onclick();
 +
          }
 
     }
 
     }
  
 
     function drawFocus() {
 
     function drawFocus() {
removeFocus();
+
      removeFocus();
  
 
       var id = document.getElementById('m1').getAttribute('aria-activedescendant');
 
       var id = document.getElementById('m1').getAttribute('aria-activedescendant');
var obj = document.getElementById(id);
+
      var obj = document.getElementById(id);
  
 
       if (!visible(obj)) {
 
       if (!visible(obj)) {
        toggle(obj,0);
+
            toggle(obj,0);
 
       }
 
       }
 
+
      if (!visible(obj.parentNode)) {
  if (!visible(obj.parentNode)) {
+
            toggle(obj.parentNode,0);
        toggle(obj.parentNode,0);
 
 
       }
 
       }
 
+
      if (document.getElementById(id).className)
if (document.getElementById(id).className)
+
        document.getElementById(id).className += " focus";
document.getElementById(id).className += " focus";
+
      else
else
+
        document.getElementById(id).className = "focus";
  document.getElementById(id).className = "focus";
 
 
     }
 
     }
  
 
     function removeFocus() {
 
     function removeFocus() {
var o = document.getElementsByClassName('focus')
+
            var o = document.getElementsByClassName('focus')
  
for(var i = 0; i < o.length; i++) {
+
            for(var i = 0; i < o.length; i++) {
    o[i].className = o[i].className.replace( /(?:^|\s)focus(?!\S)/g,'');
+
                o[i].className = o[i].className.replace( /(?:^|\s)focus(?!\S)/g,'');
}
+
            }
  
 
     }
 
     }
 
     function keystroke(evt) {
 
     function keystroke(evt) {
 
       var e = window.event ? window.event : evt;
 
       var e = window.event ? window.event : evt;
var activeID = document.getElementById('m1').getAttribute('aria-activedescendant');
+
            var activeID = document.getElementById('m1').getAttribute('aria-activedescendant');
  
if (e.which == 13) { // enter
+
            if (e.which == 13) { // enter
toggle(document.getElementById(activeID),0);
+
                toggle(document.getElementById(activeID),0);
}
+
            }
else if (e.which == 40) { // down arrow
+
            else if (e.which == 40) { // down arrow
 
           document.getElementById('m1').setAttribute('aria-activedescendant',document.getElementById(activeID).getAttribute('data-next'));
 
           document.getElementById('m1').setAttribute('aria-activedescendant',document.getElementById(activeID).getAttribute('data-next'));
 
           drawFocus();
 
           drawFocus();
}
+
            }
else if (e.which == 38) {  // up arrow
+
            else if (e.which == 38) {  // up arrow
 
           document.getElementById('m1').setAttribute('aria-activedescendant',document.getElementById(activeID).getAttribute('data-previous'));
 
           document.getElementById('m1').setAttribute('aria-activedescendant',document.getElementById(activeID).getAttribute('data-previous'));
 
           drawFocus();
 
           drawFocus();
}
+
            }
else if (e.which == 39) { // right arrow
+
            else if (e.which == 39) {           // right arrow
if (activeID.indexOf("l1") > -1) {
+
                    if (activeID.indexOf("l1") > -1) {
          toggle(document.getElementById('l2'),1);
+
              toggle(document.getElementById('l2'),1);
 
             document.getElementById('m1').setAttribute('aria-activedescendant',"l2");
 
             document.getElementById('m1').setAttribute('aria-activedescendant',"l2");
 
           }
 
           }
 
           else {
 
           else {
          toggle(document.getElementById('l1'),1);
+
              toggle(document.getElementById('l1'),1);
 
             document.getElementById('m1').setAttribute('aria-activedescendant',"l1");
 
             document.getElementById('m1').setAttribute('aria-activedescendant',"l1");
 
           }
 
           }
 
           drawFocus();
 
           drawFocus();
}
+
            }
else if (e.which == 37) { // left arrow
+
            else if (e.which == 37) {           // left arrow
if (activeID.indexOf("l1") > -1) {
+
                    if (activeID.indexOf("l1") > -1) {
          toggle(document.getElementById('l2'),1);
+
              toggle(document.getElementById('l2'),1);
 
             document.getElementById('m1').setAttribute('aria-activedescendant',"l2");
 
             document.getElementById('m1').setAttribute('aria-activedescendant',"l2");
 
           }
 
           }
 
           else {
 
           else {
        toggle(document.getElementById('l1'),1);
+
                toggle(document.getElementById('l1'),1);
 
             document.getElementById('m1').setAttribute('aria-activedescendant',"l1");
 
             document.getElementById('m1').setAttribute('aria-activedescendant',"l1");
 
           }
 
           }
 
           drawFocus();
 
           drawFocus();
}
+
            }
 
     }
 
     }
 
   </script>
 
   </script>
Line 138: Line 141:
 
<body>
 
<body>
  
<h2>Menubar with menu items that contain menus with other menu itemsr</h2>
+
<h2>Menubar with menu items that contain menus with other menu items</h2>
 
<div>
 
<div>
 
<ul tabindex="0" onclick="showHide(event);" onkeyup="keystroke(event);" id="m1" onfocus="drawFocus();" onblur="removeFocus();" role="menubar" aria-activedescendant="l1" >
 
<ul tabindex="0" onclick="showHide(event);" onkeyup="keystroke(event);" id="m1" onfocus="drawFocus();" onblur="removeFocus();" role="menubar" aria-activedescendant="l1" >
   <li tabindex="-1" id="l1" role="menuitem" aria-haspopup="true" aria-labelledby="label1" data-next="l1a" data-previous="l1c"><span id="label1" >WCAG 2 &#9660;</span>
+
   <li id="l1" role="menuitem" aria-haspopup="true" aria-labelledby="label1" data-next="l1a" data-previous="l1c"><span id="label1" aria-expanded="false" >File &#9660;</span>
 
     <ul role="menu" id="u1" class="menu" >
 
     <ul role="menu" id="u1" class="menu" >
       <li id="l1a" data-next="l1b" data-previous="l1" tabindex="-1" onclick="window.location = 'http://www.w3.org/TR/2008/REC-WCAG20-20081211/';" role="menuitem">WCAG 2.0</li>
+
       <li tabindex="-1" id="l1a" data-next="l1b" data-previous="l1" onclick="alert('Saving file');" role="menuitem">Save</li>
       <li id="l1b" tabindex="-1" data-next="l1c" data-previous="l1a" onclick="window.location = 'http://www.w3.org/TR/UNDERSTANDING-WCAG20/';" role="menuitem">Understanding WCAG</li>
+
       <li tabindex="-1" id="l1b" data-next="l1c" data-previous="l1a" onclick="alert('Saving file as ...');" role="menuitem">Save as ...</li>
       <li id="l1c" tabindex="-1" data-next="l1" data-previous="l1b" onclick="window.location = 'http://www.w3.org/WAI/WCAG20/quickref/';" role="menuitem">How to Meet WCAG</li>
+
       <li tabindex="-1" id="l1c" data-next="l1" data-previous="l1b" onclick="alert('Printing file');" role="menuitem">Print</li>
 
     </ul>
 
     </ul>
 
   </li>
 
   </li>
   <li id="l2" tabindex="-1" role="menuitem" aria-haspopup="true" aria-labeleldby="label2" data-next="l2a" data-previous="l2c"><span id="label2">Section 508 &#9660;</span>
+
   <li id="l2" tabindex="-1" role="menuitem" aria-haspopup="true" aria-labeleldby="label2" data-next="l2a" data-previous="l2c"><span id="label2" aria-expanded="false">Review</span>
 
     <ul role="menu" id="u2" class="menu" >
 
     <ul role="menu" id="u2" class="menu" >
       <li id="l2a" data-next="l2b" data-previous="l2" tabindex="-1" onclick="window.location ='http://www.access-board.gov/guidelines-and-standards/communications-and-it/about-the-section-508-standards/section-508-standards';" role="menuitem">The Standards</li>
+
       <li id="l2a" data-next="l2b" data-previous="l2" tabindex="-1" onclick="alert('Checking spelling');" role="menuitem">Spelling</li>
       <li id="l2b" data-next="l2c" data-previous="l2a" tabindex="-1" onclick="window.location ='http://www.access-board.gov/guidelines-and-standards/communications-and-it/about-the-section-508-standards/section-508-standards#subpart_b';" role="menuitem">Technical Standards</li>
+
       <li id="l2b" data-next="l2c" data-previous="l2a" tabindex="-1" onclick="alert('Opening thesaurus');" role="menuitem">Thesaurus</li>
       <li id="l2c" data-next="l2" data-previous="l2b" tabindex="-1" onclick="window.location ='http://www.access-board.gov/guidelines-and-standards/communications-and-it/about-the-section-508-standards/section-508-standards#subpart_c';" role="menuitem">Functional Standards</li>
+
       <li id="l2c" data-next="l2" data-previous="l2b" tabindex="-1" onclick="alert('Checking Accessibility');" role="menuitem">Accessibility</li>
 
     </ul>
 
     </ul>
 
   </li>
 
   </li>
 
</ul>
 
</ul>
 +
 
</div>
 
</div>
  
 
<div style="clear:both; padding-top:4em;">&nbsp;</div>
 
<div style="clear:both; padding-top:4em;">&nbsp;</div>
 
</html>
 
</html>
 +
 +
[[category:ARIA]]

Latest revision as of 15:09, 7 March 2018

This example is not working correctly.

ARIA menus

Menubar with menu items that contain menus with other menu items