-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathmenus.html
104 lines (103 loc) · 12.5 KB
/
menus.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Menus</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width"> <link href="css/training.css" rel="stylesheet" type="text/css">
</head>
<body><script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-40224544-1', 'ncsu.edu'); ga('send', 'pageview'); </script><a href="#main" title="Skip to main content" class="skip-main">Skip To Main Content</a>
<h1>Menus</h1>
<nav>
<p class="toc">
<label for="toc-menu" class="screen-reader">Table of Contents Menu</label> <select id="toc-menu">
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/">Table of Contents</option>
<optgroup label="The Nature of What is Required">
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/understand-nature.html">Overview</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/what-accessible-means.html">What Accessibility Means</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/law.html">Accessibility and the Law</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/ada.html">Americans with Disabilities Act</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/508.html">Section 508</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/wcag.html">WCAG 2</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/vpat.html">VPAT</option>
</optgroup>
<optgroup label="Choose a technology">
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/technology-overview.html">Overview</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/technology-html.html">HTML</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/technology-pdf.html">PDF</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/technology-office.html">Office Documents</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/technology-rich-media.html">Rich Media</option>
</optgroup>
<optgroup label="Some Basics">
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/basics-overview.html">Overview</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/language.html">Language</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/valid-code.html">Valid Code</option>
</optgroup>
<optgroup label="Document Structure">
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/headings.html">Headings</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/aria-landmarks.html">ARIA Landmarks</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/lists.html">Lists</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/tables.html">Tables</option>
</optgroup>
<optgroup label="User Interactions">
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/mouse-and-keyboard-events.html">Mouse and Keyboard Events</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/visual-focus.html">Visual Focus</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/menus.html">Menus</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/skip-to-main-content.html">Skip to Main Content Links</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/forms.html">Forms</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/color-contrast.html">Color Contrast</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/links.html">Links</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/link-new-window.html">Links Opening in New Windows</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/link-text-alt.html">Text or Alt Attribute for Links</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/link-internal.html">Internal Links</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/link-behavior.html">Link vs. Button</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/link-text-descriptive-target.html">Using Descriptive Link Text</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/link-text-length.html">Length of Link Text</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/link-text-unique.html">Unique Link Text</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/link-text-url.html">URL Text</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/link-underline.html">Underline Style for Links</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/find-content-multiple.html">Finding Content in Multiple Ways</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/timed-events.html">Timed Events</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/aria-checkbox.html">ARIA Checkbox Tutorial</option>
</optgroup>
<optgroup label="Conveying Through Alternate Senses">
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/alternative-text.html">Alternative Text</option>
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/captioning.html">Captioning</option>
</optgroup>
<optgroup label="Appendices">
<option value="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/testing-tools.html">Appendix A - Testing Tools</option>
</optgroup>
</select>
<input id="go-button" type="button" value="GO" onclick="location= document.getElementById('toc-menu').options[ document.getElementById('toc-menu').selectedIndex].value;">
</p>
<p class="prev"><a href="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/visual-focus.html"><img src="images/left-arrow.png" alt="previous" />Visual Focus</a></p>
<p class="next"><a href="http://accessibility.oit.ncsu.edu/training/accessibility-handbook/skip-to-main-content.html">Skip to Main Content Links<img src="images/right-arrow.png" alt="next" /></a></p>
</nav><div id="main" role="main" tabindex="-1">
<p>Making a site's menu accessible has two basic principles.</p>
<ul>
<li>Make sure the menus, including submenus, can be accessed using only the keyboard.</li>
<li>Make sure the visual focus can always be seen when navigating the menu with a keyboard.</li>
</ul>
<p>There are multiple ways to implement menus accessibly, some of which may require additional work. Menu functionality can be broken down into two categories, managed focus and non-managed focus.</p>
<ul>
<li>The menu can be completely navigated using only the tab and shift-tab keys. (non-managed focus)</li>
<li>The menu is navigated using a combination of tab, shift-tab, and arrow keys. (managed focus)</li>
</ul>
<p>The principal difference is in determining how keyboard events are going to be handled. Non-managed means the browser takes care of controlling the flow of keyboard focus through the menu, and managed means you are responsible for controlling the flow of the keyboard focus through the menu.</p>
<h2>Non-Managed Focus Menus</h2>
<p>The browser might provide all of the functionality you need in order to successfully navigate your menu. The browser already makes the tab and shift-tab keys move to the next and previous links respectively. If your menu system can be navigated using only those two key combinations, in conjunction with pressing return to activate a link, then no additional work is needed. The user will simply see the menu system as a linear collection of links in a nested list that they can move backward and forward through. In this case the relationship that a menu item has with its siblings and parent and child menu items is determined through the list nesting.</p>
<p>A popular example of a non-managed focus menu is the jQuery-based <a href="http://users.tpg.com.au/j_birch/plugins/superfish/">Superfish</a>.</p>
<p>Another menu example is <a href="http://simplyaccessible.com/examples/css-menu/option-6/">drop-down menu from Simply Accessible</a>.</p>
<h2>Managed Focus Menus</h2>
<p>If you want to use the arrow keys to navigate you menu and submenu, you must trap the keyboard events and translate those events into moving the focus through the menu system. The browser will not automatically translate the down arrow as meaning to go to the next menu item. You must handle that action yourself. By default, if you press the down arrow, the browser will simply try to scroll the page down.</p>
<p>By utilizing the arrow keys, you could form a more complex structure and provide some additional semantics to your menu so the user would know if a particular item was a sub-menu item of another item. In other words, you could begin to describe the structure of your menu. For example, the left and right arrows could move across the top level menu items in a horizontal menu, and the down arrows could open a submenu beneath each menu item. Using this technique also requires using ARIA attributes to describe the relationships.</p>
<p>A popular managed focus menu is from <a href="http://hanshillen.github.com/jqtest/?tabid=dialog#goto_menubar">jQueryUI</a>.</p>
<p>Another managed focus menu that is also accessible is from the <a href="http://oaa-accessibility.org/examplep/menubar1/">Open Ajax Alliance</a></p>
<h2>Menus That Contain More Than Links</h2>
<p>All of the above are good techniques if you have simple menus and submenus that only contain links. Some menus, often referred to as "Mega Menus" contain many other types of objects like images, headings, and paragraphs. These can be very difficult to make fully accessible. You could make the case that these types of menus have moved beyond simple menus and are more in the realm of tabs and tabpanels.</p>
<p>ARIA techniques can help to make menus with submenus more accessible.</p>
<h2>Further Reading</h2>
<ul>
<li><a href="http://terrillthompson.com/blog/202">Terrill Thomson blog post on accessible drop down menus</a></li>
</ul>
</div></body>
</html>