Difference between revisions of "ARIA Menu"

From Level Access Web Labs
Jump to navigation Jump to search
 
(16 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 58: Line 60:
 
                   obj.style.display = "block";
 
                   obj.style.display = "block";
 
             }
 
             }
                 else if (!visible(obj))
+
                 else if (!visible(obj)) {
 
                   obj.style.display = "block";
 
                   obj.style.display = "block";
 +
                  obj.setAttribute("aria-expanded","true");
 +
                  obj.querySelector("li").focus();
 +
                }
 
                 else
 
                 else
 
                     obj.style.display = "none";
 
                     obj.style.display = "none";
Line 139: Line 144:
 
<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>
<li id="13" tabindex="-1" ><span id="label3">No Submenu</span><li>
 
 
</ul>
 
</ul>
  
Line 159: Line 163:
  
 
<div style="clear:both; padding-top:4em;">&nbsp;</div>
 
<div style="clear:both; padding-top:4em;">&nbsp;</div>
 
<div role="menuitem"> test </div>
 
 
</html>
 
</html>
  
 
[[category:ARIA]]
 
[[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