{"id":368,"date":"2018-12-10T17:26:20","date_gmt":"2018-12-10T17:26:20","guid":{"rendered":"https:\/\/pressbooks.library.ryerson.ca\/wafd\/?post_type=chapter&#038;p=368"},"modified":"2022-12-16T17:16:01","modified_gmt":"2022-12-16T17:16:01","slug":"menu-bars","status":"publish","type":"chapter","link":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/chapter\/menu-bars\/","title":{"raw":"Menu Bars","rendered":"Menu Bars"},"content":{"raw":"Menu bars are typically presented horizontally across the top of a website or web application. They contain links to key areas of the website or application. They function as toggles that open submenus or function as both links and toggles.\u00a0Menu bars remain in view across the entire website or application.\r\n<div class=\"textbox\">\r\n\r\n<strong>Roles, states, and properties used in a menu bar<\/strong>\r\n\r\n<code><code><code><\/code><\/code><\/code>\r\n<ul>\r\n \t<li>aria-hidden = [true|false]<\/li>\r\n \t<li>role = \"menubar\"<\/li>\r\n \t<li>role = \"menu\"<\/li>\r\n \t<li>role = \"menuitem\"<\/li>\r\n \t<li>aria-labelledby = \"[instruction div id]\"<\/li>\r\n \t<li>aria-label = [link text]<\/li>\r\n \t<li>tabindex = [0 | -1]<\/li>\r\n \t<li>aria-haspopup = \"true\"<\/li>\r\n \t<li>aria-expanded = \"[true|false]\"<\/li>\r\n \t<li>aria-selected = \"[true|false]\"<\/li>\r\n<\/ul>\r\n<code><code><\/code><\/code>\r\n\r\n<\/div>\r\n<div style=\"margin: 1em 0; padding: 1em; border: 1px solid #ddd; border-left: 10px solid #0000ff;\"><strong>Suggested Reading:<\/strong> For more about accessible menus, see <a href=\"https:\/\/www.w3.org\/WAI\/ARIA\/apg\/patterns\/menu\/\">ARIA Authoring Practices Guide: Menus or Menu Bar<\/a>.<\/div>\r\nThe following JSFiddle presents a typical menu bar widget with a variety of sub menus. Review the JavaScript and HTML markup. Test the menu bar presented under the Result tab with ChromeVox to understand how it functions without any accessibility features added. You can work in JSFiddle itself by clicking the \u201cEdit in JSFiddle\u201d link at the top, right-hand side, copying the accessibility\/WAI-ARIA code described below to fix the accessibility of the menu bar before completing <a href=\"https:\/\/pressbooks.library.torontomu.ca\/wafd\/chapter\/6-3-activity-12-accessible-menu-bar\/\">Activity 12<\/a> on the page that follows.\r\n<div style=\"height: 600px, overflow:hidden;\">[h5p id=\"76\"]<\/div>\r\n<!--https:\/\/jsfiddle.net\/greggy\/xs5b6zf3\/embedded\/-->\r\n\r\nFirst, provide some instructions on how to use the menu with a keyboard and add them to the default options.\r\n<div style=\"height: 55px, overflow:hidden;\">[h5p id=\"77\"]<\/div>\r\n<!--https:\/\/pastebin.com\/embed_iframe\/LD0s1Tm2\/noheader-->\r\n\r\nHide the instructions from screen readers until needed, adding <code>aria-hidden=\"true\"<\/code> to the instructions <code>&lt;div&gt;<\/code> defined when the menu is initialized.\r\n<div style=\"height: 65px, overflow:hidden;\">[h5p id=\"78\"]<\/div>\r\n<!--https:\/\/pastebin.com\/embed_iframe\/EuH3K7Hx\/noheader-->\r\n\r\nAdd\u00a0<code>role=\"menubar\"<\/code> to the top level <code>&lt;ul&gt;<\/code> in the menu. Make that <code>&lt;ul&gt;<\/code> keyboard focusable with <code>tabindex=\"0\"<\/code>, so it reads the instructions while in focus and referenced with <code>aria-labelledby<\/code>.\r\n<div style=\"height: 175px, overflow:hidden;\">[h5p id=\"79\"]<\/div>\r\n<!--https:\/\/pastebin.com\/embed_iframe\/LZxn3yiH\/noheader-->\r\n\r\nFor all the menu items in the menu bar that have submenus, add <code>role=\"menu\"<\/code> to their <code>&lt;ul&gt;<\/code> and hide them by default using <code>aria-hidden=\"true\"<\/code>. This can be located after the <code>$elem.find('ul:eq(0)')<\/code> block presented immediately above.\r\n<div style=\"height: 65px, overflow:hidden;\">[h5p id=\"80\"]<\/div>\r\n<!--https:\/\/pastebin.com\/embed_iframe\/w5rnaP2d\/noheader-->\r\n\r\nHide the links in the menu items from screen readers by default using <code>tabindex=\"-1\"<\/code> and setting <code>aria-hidden=\"true\"<\/code>.\r\n<div style=\"height: 80px, overflow:hidden;\">[h5p id=\"81\"]<\/div>\r\n<!--https:\/\/pastebin.com\/embed_iframe\/rzgPaQzU\/noheader-->\r\n\r\nSet up the menu items throughout the menu using <code>role=\"menuitem\".<\/code>\u00a0Also, remove keyboard access by default with <code>tabindex=\"-1\"<\/code>. Next, label each menu item with the text of the associated link using <code>aria-label=\"[$link.text]\"<\/code>.\r\n<div style=\"height: 80px, overflow:hidden;\">[h5p id=\"82\"]<\/div>\r\n<!--https:\/\/pastebin.com\/embed_iframe\/UwVJEDGY\/noheader-->\r\n\r\nFor each of the menu items that has a submenu, add <code>aria-haspopup=\"true\"<\/code> to announce the presence of the submenu, and set its default state to \u201ccollapsed\u201d by adding <code>aria-expanded=\"false\"<\/code>.\r\n<div style=\"height: 80px, overflow:hidden;\">[h5p id=\"83\"]<\/div>\r\n<!--https:\/\/pastebin.com\/embed_iframe\/430bXCFB\/noheader-->\r\n\r\nWhen a menu item is marked selected, also add <code>aria-selected=\"true\"<\/code> and add keyboard access back to the menu item with <code>tabindex=\"0\"<\/code>.\r\n<div style=\"height: 120px, overflow:hidden;\">[h5p id=\"84\"]<\/div>\r\n<!--https:\/\/pastebin.com\/embed_iframe\/FD0Lf4Rz\/noheader-->\r\n\r\nAdd keyboard access back to menu items using <code>tabindex=\"0\"<\/code>.\r\n<div style=\"height: 300px, overflow:hidden;\">[h5p id=\"85\"]<\/div>\r\n<!--https:\/\/pastebin.com\/embed_iframe\/u0GTXBvh\/noheader-->\r\n\r\nReference the keyboard access class, where mouse events are defined in the <code>onKeyDown<\/code> function, described below.\r\n<div style=\"height: 100px, overflow:hidden;\">[h5p id=\"86\"]<\/div>\r\n<!--https:\/\/pastebin.com\/embed_iframe\/uDYkxaDH\/noheader-->\r\n\r\nIn the <code>showSubMenu<\/code> function, add <code>aria-expanded=\"true\"<\/code> submenus when they are expanded, remove keyboard access from the submenu container with <code>tabindex=\"-1\"<\/code>. Then, make the submenu visible with <code>aria-hidden=\"false\"<\/code>.\r\n<div style=\"height: 220px, overflow:hidden;\">[h5p id=\"87\"]<\/div>\r\n<!--https:\/\/pastebin.com\/embed_iframe\/nazFerkV\/noheader-->\r\n\r\nIn the <code>hideSubMenu<\/code> function, set <code>aria-expanded=\"false\"<\/code>, hide submenus with <code>aria-hidden=\"true\"<\/code>, and remove keyboard access with <code>tabindex=\"-1\"<\/code> when a submenu is closed.\r\n<div style=\"height: 120px, overflow:hidden;\">[h5p id=\"88\"]<\/div>\r\n<!--https:\/\/pastebin.com\/embed_iframe\/bEK9H1aj\/noheader-->\r\n\r\nWhen the <code>collapseAll<\/code> function is called, to collapse any open menus, reverse all attributes defining the element as open, reverting to <code>aria-hidden=\"true\"<\/code>, <code>aria-expanded=\"false\"<\/code> and re-adding keyboard access with <code>tabindex=\"0\"<\/code> so it can be opened again.\r\n<div style=\"height: 130px, overflow:hidden;\">[h5p id=\"89\"]<\/div>\r\n<!--https:\/\/pastebin.com\/embed_iframe\/H4yGZEa0\/noheader-->\r\n<h2>Adding Keyboard Operability<\/h2>\r\nMenu bar keyboard functionality can be complex, particularly with large menus with multiple levels of submenus, and they can include redundant keys that perform the same function. The W3C defines suggested keyboard interaction for a menu bar as follows:\r\n<div class=\"textbox\">\r\n<h3>Menu Bar Keyboard Interaction<\/h3>\r\nThis description of keyboard behaviours assumes the following:\r\n<ol>\r\n \t<li>A horizontal <code>menubar<\/code> containing several <code>menuitem<\/code> elements.<\/li>\r\n \t<li>All items in the <code>menubar<\/code> have child submenus that contain multiple vertically arranged items.<\/li>\r\n \t<li>Some of the <code>menuitem<\/code> elements in the submenus have child submenus with items that are also vertically arranged.<\/li>\r\n<\/ol>\r\nWhen reading the following descriptions, also keep in mind these items:\r\n<ol>\r\n \t<li>Focusable elements, which may have role <code>menuitem<\/code>, <code>menuitemradio<\/code>, or <code>menuitemcheckbox<\/code>, are referred to as items.<\/li>\r\n \t<li>If a behaviour applies to only certain types of items, e.g., <code>menuitem<\/code> elements, the specific role name is used.<\/li>\r\n \t<li>Submenus, also known as pop-up menus, are elements with role <code>menu<\/code>.<\/li>\r\n \t<li>Except where noted, menus opened from a menu button behave the same as menus opened from a menu bar.<\/li>\r\n<\/ol>\r\n<ul>\r\n \t<li>When a <code>menu<\/code> opens, or when a <code>menubar<\/code> receives focus, keyboard focus is placed on the first item. All items are focusable as described in <a class=\"sec-ref\" href=\"https:\/\/www.w3.org\/WAI\/ARIA\/apg\/practices\/keyboard-interface\/#kbd_general_within\">5.6 Keyboard Navigation Inside Components<\/a>.<\/li>\r\n \t<li>Enter:\r\n<ul>\r\n \t<li>When focus is on a <code>menuitem<\/code> that has a submenu, opens the submenu and places focus on its first item.<\/li>\r\n \t<li>Otherwise, activates the item and closes the menu.<\/li>\r\n<\/ul>\r\n<\/li>\r\n \t<li>Space:\r\n<ul>\r\n \t<li>(Optional): When focus is on a <code>menuitemcheckbox<\/code>, changes the state without closing the menu.<\/li>\r\n \t<li>(Optional): When focus is on a <code>menuitemradio<\/code> that is not checked, without closing the menu, checks the focused <code>menuitemradio<\/code> and unchecks any other checked <code>menuitemradio<\/code> element in the same group.<\/li>\r\n \t<li>(Optional): When focus is on a <code>menuitem<\/code> that has a submenu, opens the submenu and places focus on its first item.<\/li>\r\n \t<li>(Optional): When focus is on a <code>menuitem<\/code> that does not have a submenu, activates the <code>menuitem<\/code> and closes the menu.<\/li>\r\n<\/ul>\r\n<\/li>\r\n \t<li>Down Arrow:\r\n<ul>\r\n \t<li>When focus is on a <code>menuitem<\/code> in a <code>menubar<\/code>, opens its submenu and places focus on the first item in the submenu.<\/li>\r\n \t<li>When focus is in a <code>menu<\/code>, moves focus to the next item, optionally wrapping from the last to the first.<\/li>\r\n<\/ul>\r\n<\/li>\r\n \t<li>Up Arrow:\r\n<ul>\r\n \t<li>When focus is in a <code>menu<\/code>, moves focus to the previous item, optionally wrapping from the first to the last.<\/li>\r\n \t<li>(Optional): When focus is on a <code>menuitem<\/code> in a <code>menubar<\/code>, opens its submenu and places focus on the last item in the submenu.<\/li>\r\n<\/ul>\r\n<\/li>\r\n \t<li>Right Arrow:\r\n<ul>\r\n \t<li>When focus is in a <code>menubar<\/code>, moves focus to the next item, optionally wrapping from the last to the first.<\/li>\r\n \t<li>When focus is in a <code>menu<\/code> and on a <code>menuitem<\/code> that has a submenu, opens the submenu and places focus on its first item.<\/li>\r\n \t<li>When focus is in a <code>menu<\/code> and on an item that does not have a submenu, performs the following 3 actions:\r\n<ol>\r\n \t<li>Closes the submenu and any parent menus.<\/li>\r\n \t<li>Moves focus to the next <code>menuitem<\/code> in the <code>menubar<\/code>.<\/li>\r\n \t<li>Either: (Recommended) opens the submenu of that <code>menuitem<\/code> without moving focus into the submenu, or opens the submenu of that <code>menuitem<\/code> and places focus on the first item in the submenu.<\/li>\r\n<\/ol>\r\nNote that if the <code>menubar<\/code> were not present, e.g., the menus were opened from a menubutton, Right Arrow would not do anything when focus is on an item that does not have a submenu.<\/li>\r\n<\/ul>\r\n<\/li>\r\n \t<li>Left Arrow:\r\n<ul>\r\n \t<li>When focus is in a <code>menubar<\/code>, moves focus to the previous item, optionally wrapping from the last to the first.<\/li>\r\n \t<li>When focus is in a submenu of an item in a <code>menu<\/code>, closes the submenu and returns focus to the parent <code>menuitem<\/code>.<\/li>\r\n \t<li>When focus is in a submenu of an item in a <code>menubar<\/code>, performs the following 3 actions:\r\n<ol>\r\n \t<li>Closes the submenu.<\/li>\r\n \t<li>Moves focus to the previous <code>menuitem<\/code> in the <code>menubar<\/code>.<\/li>\r\n \t<li>Either: (Recommended) opens the submenu of that <code>menuitem<\/code> without moving focus into the submenu, or opens the submenu of that <code>menuitem<\/code> and places focus on the first item in the submenu.<\/li>\r\n<\/ol>\r\n<\/li>\r\n<\/ul>\r\n<\/li>\r\n \t<li>Home: If arrow key wrapping is not supported, moves focus to the first item in the current <code>menu<\/code> or <code>menubar<\/code>.<\/li>\r\n \t<li>End: If arrow key wrapping is not supported, moves focus to the last item in the current <code>menu<\/code> or <code>menubar<\/code>.<\/li>\r\n \t<li>Any key that corresponds to a printable character (Optional): Move focus to the next menu item in the current menu whose label begins with that printable character.<\/li>\r\n \t<li>Escape: Close the menu that contains focus and return focus to the element or context, e.g., menu button or parent <code>menuitem<\/code>, from which the menu was opened.<\/li>\r\n \t<li>Tab: Moves focus to the next element in the tab sequence, and if the item that had focus is not in a <code>menubar<\/code>, closes its <code>menu<\/code> and all open parent <code>menu<\/code> containers.<\/li>\r\n \t<li>Shift + Tab: Moves focus to the previous element in the tab sequence, and if the item that had focus is not in a <code>menubar<\/code>, closes its <code>menu<\/code> and all open parent <code>menu<\/code> containers.<\/li>\r\n<\/ul>\r\n<div style=\"margin: 1em 0; padding: 1em; border: 1px solid #ddd; border-left: 10px solid #3c3;\">\r\n<div id=\"h-note-17\" class=\"note-title marker\" role=\"heading\"><strong>Note:<\/strong><\/div>\r\n<ol>\r\n \t<li>Disabled menu items are focusable but cannot be activated.<\/li>\r\n \t<li>A <a class=\"role-reference\" href=\"https:\/\/www.w3.org\/TR\/wai-aria-1.1\/#separator\">separator<\/a> in a menu is not focusable or interactive.<\/li>\r\n \t<li>If a menu is opened or a menu bar receives focus as a result of a context action, Esc or Enter may return focus to the invoking context. For example, a rich text editor may have a menu bar that receives focus when a shortcut key, e.g., Alt+F10, is pressed while editing. In this case, pressing Esc or activating a command from the menu may return focus to the editor.<\/li>\r\n \t<li>Although it is recommended that authors avoid doing so, some implementations of navigation menu bars may have <code>menuitem<\/code> elements that both perform a function and open a submenu. In such implementations, Enter and Space bar perform a navigation function, e.g., load new content, while Down Arrow, in a horizontal menu bar, opens the submenu associated with that same <code>menuitem<\/code>.<\/li>\r\n \t<li>When items in a <code>menubar<\/code> are arranged vertically and items in <code>menu<\/code> containers are arranged horizontally:\r\n<ol>\r\n \t<li>Down Arrow performs as Right Arrow is described above, and vice versa.<\/li>\r\n \t<li>Up Arrow performs as Left Arrow is described above, and vice versa.<\/li>\r\n<\/ol>\r\n<\/li>\r\n<\/ol>\r\n<\/div>\r\n<a href=\"https:\/\/www.w3.org\/WAI\/ARIA\/apg\/patterns\/menu\/#keyboard-interaction-12\">Source: W3C ARIA Authoring Practices Guide<\/a>\r\n\r\n<\/div>\r\nHere we have implemented a subset of the keyboard interaction W3C recommends in an <code>onKeyDown()<\/code> function that is called when event handlers are set up for menu items. These keys include <strong>Left <\/strong>and<strong> Right arrows<\/strong>, <strong>Up <\/strong>and<strong> Down arrows<\/strong>, the <strong>Space bar<\/strong> and<strong> Enter <\/strong>keys, and <strong>Tab <\/strong>and<strong> Esc<\/strong> keys. Copy the following function into the ik_menu.js file, near the end, to add keyboard operability to the menu.\r\n<div style=\"height: 1000px, overflow:hidden;\">[h5p id=\"90\"]<\/div>\r\n<!--https:\/\/pastebin.com\/embed_iframe\/ukDSJ9Bp\/noheader-->\r\n<h2>Accessible Menu Bar in Action<\/h2>\r\nWatch the following video showing ChromeVox interacting with a menu bar. The Tab key is used to navigate into the menu bar, to the first menu item, and to exit the menu bar. Left and Right arrow keys are used to move across the top level menu items. Up and Down arrows are used to move into and out of a submenu and to move between menu items in a submenu. The Space bar or Enter key are used to activate a menu item. The Esc key closes the current submenu. Aim to have the menu bar you update in the activity on the next page operate and announce itself like the one in the video.\r\n\r\n<strong>Video: <a href=\"https:\/\/www.youtube.com\/watch?v=_8XtLXak4XQ\" rel=\"noopener\">Accessible Menu Bar<\/a><\/strong>\r\n\r\n[embed]https:\/\/www.youtube.com\/embed\/_8XtLXak4XQ[\/embed]","rendered":"<p>Menu bars are typically presented horizontally across the top of a website or web application. They contain links to key areas of the website or application. They function as toggles that open submenus or function as both links and toggles.\u00a0Menu bars remain in view across the entire website or application.<\/p>\n<div class=\"textbox\">\n<p><strong>Roles, states, and properties used in a menu bar<\/strong><\/p>\n<p><code><code><code><\/code><\/code><\/code><\/p>\n<ul>\n<li>aria-hidden = [true|false]<\/li>\n<li>role = &#8220;menubar&#8221;<\/li>\n<li>role = &#8220;menu&#8221;<\/li>\n<li>role = &#8220;menuitem&#8221;<\/li>\n<li>aria-labelledby = &#8220;[instruction div id]&#8221;<\/li>\n<li>aria-label = [link text]<\/li>\n<li>tabindex = [0 | -1]<\/li>\n<li>aria-haspopup = &#8220;true&#8221;<\/li>\n<li>aria-expanded = &#8220;[true|false]&#8221;<\/li>\n<li>aria-selected = &#8220;[true|false]&#8221;<\/li>\n<\/ul>\n<p><code><code><\/code><\/code><\/p>\n<\/div>\n<div style=\"margin: 1em 0; padding: 1em; border: 1px solid #ddd; border-left: 10px solid #0000ff;\"><strong>Suggested Reading:<\/strong> For more about accessible menus, see <a href=\"https:\/\/www.w3.org\/WAI\/ARIA\/apg\/patterns\/menu\/\">ARIA Authoring Practices Guide: Menus or Menu Bar<\/a>.<\/div>\n<p>The following JSFiddle presents a typical menu bar widget with a variety of sub menus. Review the JavaScript and HTML markup. Test the menu bar presented under the Result tab with ChromeVox to understand how it functions without any accessibility features added. You can work in JSFiddle itself by clicking the \u201cEdit in JSFiddle\u201d link at the top, right-hand side, copying the accessibility\/WAI-ARIA code described below to fix the accessibility of the menu bar before completing <a href=\"https:\/\/pressbooks.library.torontomu.ca\/wafd\/chapter\/6-3-activity-12-accessible-menu-bar\/\">Activity 12<\/a> on the page that follows.<\/p>\n<div style=\"height: 600px, overflow:hidden;\">\n<div id=\"h5p-76\">\n<div class=\"h5p-content\" data-content-id=\"76\"><\/div>\n<\/div>\n<\/div>\n<p><!--https:\/\/jsfiddle.net\/greggy\/xs5b6zf3\/embedded\/ --><\/p>\n<p>First, provide some instructions on how to use the menu with a keyboard and add them to the default options.<\/p>\n<div style=\"height: 55px, overflow:hidden;\">\n<div id=\"h5p-77\">\n<div class=\"h5p-content\" data-content-id=\"77\"><\/div>\n<\/div>\n<\/div>\n<p><!--https:\/\/pastebin.com\/embed_iframe\/LD0s1Tm2\/noheader --><\/p>\n<p>Hide the instructions from screen readers until needed, adding <code>aria-hidden=\"true\"<\/code> to the instructions <code>&lt;div&gt;<\/code> defined when the menu is initialized.<\/p>\n<div style=\"height: 65px, overflow:hidden;\">\n<div id=\"h5p-78\">\n<div class=\"h5p-content\" data-content-id=\"78\"><\/div>\n<\/div>\n<\/div>\n<p><!--https:\/\/pastebin.com\/embed_iframe\/EuH3K7Hx\/noheader --><\/p>\n<p>Add\u00a0<code>role=\"menubar\"<\/code> to the top level <code>&lt;ul&gt;<\/code> in the menu. Make that <code>&lt;ul&gt;<\/code> keyboard focusable with <code>tabindex=\"0\"<\/code>, so it reads the instructions while in focus and referenced with <code>aria-labelledby<\/code>.<\/p>\n<div style=\"height: 175px, overflow:hidden;\">\n<div id=\"h5p-79\">\n<div class=\"h5p-content\" data-content-id=\"79\"><\/div>\n<\/div>\n<\/div>\n<p><!--https:\/\/pastebin.com\/embed_iframe\/LZxn3yiH\/noheader --><\/p>\n<p>For all the menu items in the menu bar that have submenus, add <code>role=\"menu\"<\/code> to their <code>&lt;ul&gt;<\/code> and hide them by default using <code>aria-hidden=\"true\"<\/code>. This can be located after the <code>$elem.find('ul:eq(0)')<\/code> block presented immediately above.<\/p>\n<div style=\"height: 65px, overflow:hidden;\">\n<div id=\"h5p-80\">\n<div class=\"h5p-content\" data-content-id=\"80\"><\/div>\n<\/div>\n<\/div>\n<p><!--https:\/\/pastebin.com\/embed_iframe\/w5rnaP2d\/noheader --><\/p>\n<p>Hide the links in the menu items from screen readers by default using <code>tabindex=\"-1\"<\/code> and setting <code>aria-hidden=\"true\"<\/code>.<\/p>\n<div style=\"height: 80px, overflow:hidden;\">\n<div id=\"h5p-81\">\n<div class=\"h5p-content\" data-content-id=\"81\"><\/div>\n<\/div>\n<\/div>\n<p><!--https:\/\/pastebin.com\/embed_iframe\/rzgPaQzU\/noheader --><\/p>\n<p>Set up the menu items throughout the menu using <code>role=\"menuitem\".<\/code>\u00a0Also, remove keyboard access by default with <code>tabindex=\"-1\"<\/code>. Next, label each menu item with the text of the associated link using <code>aria-label=\"[$link.text]\"<\/code>.<\/p>\n<div style=\"height: 80px, overflow:hidden;\">\n<div id=\"h5p-82\">\n<div class=\"h5p-content\" data-content-id=\"82\"><\/div>\n<\/div>\n<\/div>\n<p><!--https:\/\/pastebin.com\/embed_iframe\/UwVJEDGY\/noheader --><\/p>\n<p>For each of the menu items that has a submenu, add <code>aria-haspopup=\"true\"<\/code> to announce the presence of the submenu, and set its default state to \u201ccollapsed\u201d by adding <code>aria-expanded=\"false\"<\/code>.<\/p>\n<div style=\"height: 80px, overflow:hidden;\">\n<div id=\"h5p-83\">\n<div class=\"h5p-content\" data-content-id=\"83\"><\/div>\n<\/div>\n<\/div>\n<p><!--https:\/\/pastebin.com\/embed_iframe\/430bXCFB\/noheader --><\/p>\n<p>When a menu item is marked selected, also add <code>aria-selected=\"true\"<\/code> and add keyboard access back to the menu item with <code>tabindex=\"0\"<\/code>.<\/p>\n<div style=\"height: 120px, overflow:hidden;\">\n<div id=\"h5p-84\">\n<div class=\"h5p-content\" data-content-id=\"84\"><\/div>\n<\/div>\n<\/div>\n<p><!--https:\/\/pastebin.com\/embed_iframe\/FD0Lf4Rz\/noheader --><\/p>\n<p>Add keyboard access back to menu items using <code>tabindex=\"0\"<\/code>.<\/p>\n<div style=\"height: 300px, overflow:hidden;\">\n<div id=\"h5p-85\">\n<div class=\"h5p-content\" data-content-id=\"85\"><\/div>\n<\/div>\n<\/div>\n<p><!--https:\/\/pastebin.com\/embed_iframe\/u0GTXBvh\/noheader --><\/p>\n<p>Reference the keyboard access class, where mouse events are defined in the <code>onKeyDown<\/code> function, described below.<\/p>\n<div style=\"height: 100px, overflow:hidden;\">\n<div id=\"h5p-86\">\n<div class=\"h5p-content\" data-content-id=\"86\"><\/div>\n<\/div>\n<\/div>\n<p><!--https:\/\/pastebin.com\/embed_iframe\/uDYkxaDH\/noheader --><\/p>\n<p>In the <code>showSubMenu<\/code> function, add <code>aria-expanded=\"true\"<\/code> submenus when they are expanded, remove keyboard access from the submenu container with <code>tabindex=\"-1\"<\/code>. Then, make the submenu visible with <code>aria-hidden=\"false\"<\/code>.<\/p>\n<div style=\"height: 220px, overflow:hidden;\">\n<div id=\"h5p-87\">\n<div class=\"h5p-content\" data-content-id=\"87\"><\/div>\n<\/div>\n<\/div>\n<p><!--https:\/\/pastebin.com\/embed_iframe\/nazFerkV\/noheader --><\/p>\n<p>In the <code>hideSubMenu<\/code> function, set <code>aria-expanded=\"false\"<\/code>, hide submenus with <code>aria-hidden=\"true\"<\/code>, and remove keyboard access with <code>tabindex=\"-1\"<\/code> when a submenu is closed.<\/p>\n<div style=\"height: 120px, overflow:hidden;\">\n<div id=\"h5p-88\">\n<div class=\"h5p-content\" data-content-id=\"88\"><\/div>\n<\/div>\n<\/div>\n<p><!--https:\/\/pastebin.com\/embed_iframe\/bEK9H1aj\/noheader --><\/p>\n<p>When the <code>collapseAll<\/code> function is called, to collapse any open menus, reverse all attributes defining the element as open, reverting to <code>aria-hidden=\"true\"<\/code>, <code>aria-expanded=\"false\"<\/code> and re-adding keyboard access with <code>tabindex=\"0\"<\/code> so it can be opened again.<\/p>\n<div style=\"height: 130px, overflow:hidden;\">\n<div id=\"h5p-89\">\n<div class=\"h5p-content\" data-content-id=\"89\"><\/div>\n<\/div>\n<\/div>\n<p><!--https:\/\/pastebin.com\/embed_iframe\/H4yGZEa0\/noheader --><\/p>\n<h2>Adding Keyboard Operability<\/h2>\n<p>Menu bar keyboard functionality can be complex, particularly with large menus with multiple levels of submenus, and they can include redundant keys that perform the same function. The W3C defines suggested keyboard interaction for a menu bar as follows:<\/p>\n<div class=\"textbox\">\n<h3>Menu Bar Keyboard Interaction<\/h3>\n<p>This description of keyboard behaviours assumes the following:<\/p>\n<ol>\n<li>A horizontal <code>menubar<\/code> containing several <code>menuitem<\/code> elements.<\/li>\n<li>All items in the <code>menubar<\/code> have child submenus that contain multiple vertically arranged items.<\/li>\n<li>Some of the <code>menuitem<\/code> elements in the submenus have child submenus with items that are also vertically arranged.<\/li>\n<\/ol>\n<p>When reading the following descriptions, also keep in mind these items:<\/p>\n<ol>\n<li>Focusable elements, which may have role <code>menuitem<\/code>, <code>menuitemradio<\/code>, or <code>menuitemcheckbox<\/code>, are referred to as items.<\/li>\n<li>If a behaviour applies to only certain types of items, e.g., <code>menuitem<\/code> elements, the specific role name is used.<\/li>\n<li>Submenus, also known as pop-up menus, are elements with role <code>menu<\/code>.<\/li>\n<li>Except where noted, menus opened from a menu button behave the same as menus opened from a menu bar.<\/li>\n<\/ol>\n<ul>\n<li>When a <code>menu<\/code> opens, or when a <code>menubar<\/code> receives focus, keyboard focus is placed on the first item. All items are focusable as described in <a class=\"sec-ref\" href=\"https:\/\/www.w3.org\/WAI\/ARIA\/apg\/practices\/keyboard-interface\/#kbd_general_within\">5.6 Keyboard Navigation Inside Components<\/a>.<\/li>\n<li>Enter:\n<ul>\n<li>When focus is on a <code>menuitem<\/code> that has a submenu, opens the submenu and places focus on its first item.<\/li>\n<li>Otherwise, activates the item and closes the menu.<\/li>\n<\/ul>\n<\/li>\n<li>Space:\n<ul>\n<li>(Optional): When focus is on a <code>menuitemcheckbox<\/code>, changes the state without closing the menu.<\/li>\n<li>(Optional): When focus is on a <code>menuitemradio<\/code> that is not checked, without closing the menu, checks the focused <code>menuitemradio<\/code> and unchecks any other checked <code>menuitemradio<\/code> element in the same group.<\/li>\n<li>(Optional): When focus is on a <code>menuitem<\/code> that has a submenu, opens the submenu and places focus on its first item.<\/li>\n<li>(Optional): When focus is on a <code>menuitem<\/code> that does not have a submenu, activates the <code>menuitem<\/code> and closes the menu.<\/li>\n<\/ul>\n<\/li>\n<li>Down Arrow:\n<ul>\n<li>When focus is on a <code>menuitem<\/code> in a <code>menubar<\/code>, opens its submenu and places focus on the first item in the submenu.<\/li>\n<li>When focus is in a <code>menu<\/code>, moves focus to the next item, optionally wrapping from the last to the first.<\/li>\n<\/ul>\n<\/li>\n<li>Up Arrow:\n<ul>\n<li>When focus is in a <code>menu<\/code>, moves focus to the previous item, optionally wrapping from the first to the last.<\/li>\n<li>(Optional): When focus is on a <code>menuitem<\/code> in a <code>menubar<\/code>, opens its submenu and places focus on the last item in the submenu.<\/li>\n<\/ul>\n<\/li>\n<li>Right Arrow:\n<ul>\n<li>When focus is in a <code>menubar<\/code>, moves focus to the next item, optionally wrapping from the last to the first.<\/li>\n<li>When focus is in a <code>menu<\/code> and on a <code>menuitem<\/code> that has a submenu, opens the submenu and places focus on its first item.<\/li>\n<li>When focus is in a <code>menu<\/code> and on an item that does not have a submenu, performs the following 3 actions:\n<ol>\n<li>Closes the submenu and any parent menus.<\/li>\n<li>Moves focus to the next <code>menuitem<\/code> in the <code>menubar<\/code>.<\/li>\n<li>Either: (Recommended) opens the submenu of that <code>menuitem<\/code> without moving focus into the submenu, or opens the submenu of that <code>menuitem<\/code> and places focus on the first item in the submenu.<\/li>\n<\/ol>\n<p>Note that if the <code>menubar<\/code> were not present, e.g., the menus were opened from a menubutton, Right Arrow would not do anything when focus is on an item that does not have a submenu.<\/li>\n<\/ul>\n<\/li>\n<li>Left Arrow:\n<ul>\n<li>When focus is in a <code>menubar<\/code>, moves focus to the previous item, optionally wrapping from the last to the first.<\/li>\n<li>When focus is in a submenu of an item in a <code>menu<\/code>, closes the submenu and returns focus to the parent <code>menuitem<\/code>.<\/li>\n<li>When focus is in a submenu of an item in a <code>menubar<\/code>, performs the following 3 actions:\n<ol>\n<li>Closes the submenu.<\/li>\n<li>Moves focus to the previous <code>menuitem<\/code> in the <code>menubar<\/code>.<\/li>\n<li>Either: (Recommended) opens the submenu of that <code>menuitem<\/code> without moving focus into the submenu, or opens the submenu of that <code>menuitem<\/code> and places focus on the first item in the submenu.<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<\/li>\n<li>Home: If arrow key wrapping is not supported, moves focus to the first item in the current <code>menu<\/code> or <code>menubar<\/code>.<\/li>\n<li>End: If arrow key wrapping is not supported, moves focus to the last item in the current <code>menu<\/code> or <code>menubar<\/code>.<\/li>\n<li>Any key that corresponds to a printable character (Optional): Move focus to the next menu item in the current menu whose label begins with that printable character.<\/li>\n<li>Escape: Close the menu that contains focus and return focus to the element or context, e.g., menu button or parent <code>menuitem<\/code>, from which the menu was opened.<\/li>\n<li>Tab: Moves focus to the next element in the tab sequence, and if the item that had focus is not in a <code>menubar<\/code>, closes its <code>menu<\/code> and all open parent <code>menu<\/code> containers.<\/li>\n<li>Shift + Tab: Moves focus to the previous element in the tab sequence, and if the item that had focus is not in a <code>menubar<\/code>, closes its <code>menu<\/code> and all open parent <code>menu<\/code> containers.<\/li>\n<\/ul>\n<div style=\"margin: 1em 0; padding: 1em; border: 1px solid #ddd; border-left: 10px solid #3c3;\">\n<div id=\"h-note-17\" class=\"note-title marker\" role=\"heading\"><strong>Note:<\/strong><\/div>\n<ol>\n<li>Disabled menu items are focusable but cannot be activated.<\/li>\n<li>A <a class=\"role-reference\" href=\"https:\/\/www.w3.org\/TR\/wai-aria-1.1\/#separator\">separator<\/a> in a menu is not focusable or interactive.<\/li>\n<li>If a menu is opened or a menu bar receives focus as a result of a context action, Esc or Enter may return focus to the invoking context. For example, a rich text editor may have a menu bar that receives focus when a shortcut key, e.g., Alt+F10, is pressed while editing. In this case, pressing Esc or activating a command from the menu may return focus to the editor.<\/li>\n<li>Although it is recommended that authors avoid doing so, some implementations of navigation menu bars may have <code>menuitem<\/code> elements that both perform a function and open a submenu. In such implementations, Enter and Space bar perform a navigation function, e.g., load new content, while Down Arrow, in a horizontal menu bar, opens the submenu associated with that same <code>menuitem<\/code>.<\/li>\n<li>When items in a <code>menubar<\/code> are arranged vertically and items in <code>menu<\/code> containers are arranged horizontally:\n<ol>\n<li>Down Arrow performs as Right Arrow is described above, and vice versa.<\/li>\n<li>Up Arrow performs as Left Arrow is described above, and vice versa.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<\/div>\n<p><a href=\"https:\/\/www.w3.org\/WAI\/ARIA\/apg\/patterns\/menu\/#keyboard-interaction-12\">Source: W3C ARIA Authoring Practices Guide<\/a><\/p>\n<\/div>\n<p>Here we have implemented a subset of the keyboard interaction W3C recommends in an <code>onKeyDown()<\/code> function that is called when event handlers are set up for menu items. These keys include <strong>Left <\/strong>and<strong> Right arrows<\/strong>, <strong>Up <\/strong>and<strong> Down arrows<\/strong>, the <strong>Space bar<\/strong> and<strong> Enter <\/strong>keys, and <strong>Tab <\/strong>and<strong> Esc<\/strong> keys. Copy the following function into the ik_menu.js file, near the end, to add keyboard operability to the menu.<\/p>\n<div style=\"height: 1000px, overflow:hidden;\">\n<div id=\"h5p-90\">\n<div class=\"h5p-content\" data-content-id=\"90\"><\/div>\n<\/div>\n<\/div>\n<p><!--https:\/\/pastebin.com\/embed_iframe\/ukDSJ9Bp\/noheader --><\/p>\n<h2>Accessible Menu Bar in Action<\/h2>\n<p>Watch the following video showing ChromeVox interacting with a menu bar. The Tab key is used to navigate into the menu bar, to the first menu item, and to exit the menu bar. Left and Right arrow keys are used to move across the top level menu items. Up and Down arrows are used to move into and out of a submenu and to move between menu items in a submenu. The Space bar or Enter key are used to activate a menu item. The Esc key closes the current submenu. Aim to have the menu bar you update in the activity on the next page operate and announce itself like the one in the video.<\/p>\n<p><strong>Video: <a href=\"https:\/\/www.youtube.com\/watch?v=_8XtLXak4XQ\" rel=\"noopener\">Accessible Menu Bar<\/a><\/strong><\/p>\n<p><iframe loading=\"lazy\" id=\"oembed-1\" title=\"Accessible Menu Bar\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/_8XtLXak4XQ?feature=oembed&#38;rel=0\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n","protected":false},"author":100,"menu_order":2,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-368","chapter","type-chapter","status-publish","hentry"],"part":37,"_links":{"self":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/368","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/users\/100"}],"version-history":[{"count":40,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/368\/revisions"}],"predecessor-version":[{"id":2025,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/368\/revisions\/2025"}],"part":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/parts\/37"}],"metadata":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/368\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/media?parent=368"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapter-type?post=368"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/contributor?post=368"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/license?post=368"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}