CINXE.COM

<!DOCTYPE html> <html class="no-js" lang="en" dir="ltr" prefix="og: http://ogp.me/ns#"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <script> document.documentElement.className = document.documentElement.className.replace('no-js', 'has-js'); function downloadJSAtOnload() { var element = document.createElement("script"); element.src = "/WAI/assets/scripts/main.js?1739541174349523255"; document.body.appendChild(element); } window.addEventListener("load", downloadJSAtOnload, false); </script> <link rel="stylesheet" href="/WAI/assets/css/style.css?1739541174349523255"> <title> Application Menus | Web Accessibility Initiative (WAI) | W3C</title><style>kbd { display: inline-block; color: #111; border: 1px solid #888; border-radius: 0.2em; box-shadow: 0 0.1em 0.1em rgba(240,240,240,.5); background-color: #F9F9F9; background-image: linear-gradient(to bottom, #ddd, #f9f9f9, #ddd); padding: 0.1em 0.3em; margin-bottom: .3em; font-family: inherit; font-size: 0.85em; white-space:nowrap } </style> <meta name="generator" content="Jekyll v4.3.3" /> <meta property="og:title" content="Application Menus" /> <meta name="author" content="W3C Web Accessibility Initiative (WAI)" /> <meta property="og:locale" content="en" /> <meta name="description" content="Accessibility resources free online from the international standards organization: W3C Web Accessibility Initiative (WAI)." /> <meta property="og:description" content="Accessibility resources free online from the international standards organization: W3C Web Accessibility Initiative (WAI)." /> <link rel="canonical" href="https://www.w3.org/WAI/tutorials/menus/application-menus/" /> <meta property="og:url" content="https://www.w3.org/WAI/tutorials/menus/application-menus/" /> <meta property="og:site_name" content="Web Accessibility Initiative (WAI)" /> <meta property="og:type" content="website" /> <meta name="twitter:card" content="summary_large_image" /> <meta property="twitter:title" content="Application Menus" /> <meta name="twitter:site" content="@w3c_wai" /> <meta name="twitter:creator" content="@W3C Web Accessibility Initiative (WAI)" /> <script type="application/ld+json"> {"@context":"https://schema.org","@type":"WebPage","author":{"@type":"Person","name":"W3C Web Accessibility Initiative (WAI)"},"description":"Accessibility resources free online from the international standards organization: W3C Web Accessibility Initiative (WAI).","headline":"Application Menus","url":"https://www.w3.org/WAI/tutorials/menus/application-menus/"}</script>  <meta name="twitter:image" property="og:image" content="https://www.w3.org/WAI/assets/images/social-sharing-default.jpg"> <link rel="alternate" type="application/rss+xml" href="/WAI/feed.xml"> </head> <body id="top" class="page-application-menus "> <nav aria-label="Skip Link and Language Selector" id="controls" class="default-grid"> <ul> <li><a href="#main">Skip to Content</a></li> <li class="opt"> <a href="/WAI/meta/customize/">Change Text Size or Colors</a> </li> <li class="opt"> <a href="/WAI/translations/">All Translations <svg focusable="false" aria-hidden="true" class="icon-translations "><use xlink:href="/WAI/assets/images/icons.svg#icon-translations"></use></svg></a> </li> </ul></nav> <header id="site-header" class="default-grid with-gap"> <div class="logos"> <a lang="en" class="home w3c" href="https://www.w3.org/"> <svg role="img" aria-label="W3C" viewBox="0 0 68 34" xmlns="http://www.w3.org/2000/svg"><g><path d="m16.117 1.006 5.759 19.58 5.759-19.58h4.17 11.444v1.946l-5.879 10.128c2.065.663 3.627 1.868 4.686 3.615 1.059 1.748 1.589 3.799 1.589 6.155 0 2.914-.775 5.363-2.324 7.348s-3.555 2.978-6.017 2.978c-1.854 0-3.469-.589-4.845-1.767-1.377-1.178-2.396-2.773-3.058-4.786l3.256-1.35c.477 1.218 1.106 2.178 1.887 2.879.781.702 1.701 1.052 2.76 1.052 1.112 0 2.052-.622 2.82-1.866.768-1.245 1.152-2.74 1.152-4.489 0-1.933-.411-3.429-1.231-4.488-.954-1.244-2.45-1.867-4.489-1.867h-1.588v-1.906l5.56-9.612h-6.712l-.382.65-8.163 27.548h-.397l-5.958-19.937-5.957 19.937h-.397l-9.53-32.168h4.17l5.759 19.58 3.892-13.185-1.906-6.395z"/><path d="m64.92 1.006c-.819 0-1.554.295-2.111.861-.591.6-.92 1.376-.92 2.178s.313 1.545.887 2.128c.583.591 1.334.912 2.145.912.793 0 1.562-.321 2.161-.903.574-.557.887-1.3.887-2.136 0-.811-.321-1.57-.878-2.136-.584-.592-1.344-.904-2.171-.904zm2.643 3.065c0 .701-.271 1.351-.768 1.832-.524.507-1.174.777-1.892.777-.675 0-1.342-.278-1.84-.785s-.777-1.157-.777-1.849.287-1.368.802-1.891c.481-.49 1.131-.751 1.84-.751.726 0 1.376.271 1.883.785.49.489.752 1.147.752 1.882zm-2.559-1.807h-1.3v3.445h.65v-1.469h.642l.701 1.469h.726l-.769-1.57c.498-.102.785-.439.785-.929 0-.625-.472-.946-1.435-.946zm-.118.422c.608 0 .886.169.886.591 0 .405-.278.549-.87.549h-.549v-1.14z"/><path d="m59.807.825.676 4.107-2.391 4.575s-.918-1.941-2.443-3.015c-1.285-.905-2.122-1.102-3.431-.832-1.681.347-3.587 2.357-4.419 4.835-.995 2.965-1.005 4.4-1.04 5.718-.056 2.113.277 3.362.277 3.362s-1.452-2.686-1.438-6.62c.009-2.808.451-5.354 1.75-7.867 1.143-2.209 2.842-3.535 4.35-3.691 1.559-.161 2.791.59 3.743 1.403 1 .854 2.01 2.721 2.01 2.721z"/><path d="m60.102 24.063s-1.057 1.889-1.715 2.617c-.659.728-1.837 2.01-3.292 2.651s-2.218.762-3.656.624c-1.437-.138-2.772-.97-3.24-1.317s-1.664-1.369-2.34-2.322-1.733-2.859-1.733-2.859.589 1.91.958 2.721c.212.467.864 1.894 1.789 3.136.863 1.159 2.539 3.154 5.086 3.604 2.547.451 4.297-.693 4.73-.97s1.346-1.042 1.924-1.66c.603-.645 1.174-1.468 1.49-1.962.231-.36.607-1.092.607-1.092z"/></g></svg> </a> <a lang="en" class="home" href="/WAI/"> <span class="wai"><span class="wa">Web Accessibility</span> <span class="i"><span class="initieative">Initiative</span> <span>WAI</span></span></span> </a> <div class="claim"> <span>Strategies, standards, resources to make the Web accessible to people with disabilities</span> </div> <button class="button button-menu" aria-haspopup="true" aria-expanded="false" id="openmenu"><span><svg focusable="false" aria-hidden="true" class="icon-menu "><use xlink:href="/WAI/assets/images/icons.svg#icon-menu"></use></svg> Menu</span></button> </div> <div class="navigations"> <nav class="metanav" aria-label="Meta & Search" lang="en"> <ul> <li><a href="/WAI/about/participating/">Get Involved</a></li> <li><a href="/WAI/about/">About W3C WAI</a></li> <li> <form action="/WAI/search/" role="search"> <div> <label for="header-search"> <span class="visuallyhidden">Search:</span> <input id="header-search" type="search" name="q" placeholder="Search" aria-label="Search"> </label> <button class="button button-icon button-nobg button-noborder"><span><svg focusable="false" aria-label="Submit Search" class="icon-search "><use xlink:href="/WAI/assets/images/icons.svg#icon-search"></use></svg></span></button> </div> </form> </li> </ul> </nav> </div> </header><nav class="mainnav" aria-label="Main" lang="en"><ul><li><a lang="en" href="/WAI/fundamentals/"><span>Accessibility Fundamentals</span></a></li><li><a lang="en" href="/WAI/planning/"><span>Planning & Policies</span></a></li><li><a lang="en" href="/WAI/design-develop/"><span>Design & Develop</span></a></li><li><a lang="en" href="/WAI/test-evaluate/"><span>Test & Evaluate</span></a></li><li><a lang="en" href="/WAI/teach-advocate/"><span>Teach & Advocate</span></a></li><li><a lang="en" href="/WAI/standards-guidelines/"><span>Standards/<wbr>Guidelines</span></a></li></ul></nav><nav class="default-grid breadcrumb" aria-label="Breadcrumb" lang="en"> <ul style="align-self: center;"> <li><a href="/WAI/" lang="en">Home</a></li><li><a lang="en" href="/WAI/design-develop/"><span>Design & Develop</span></a></li><li><a lang="en" href="/WAI/tutorials/"><span>Tutorials</span></a></li><li><a lang="en" href="/WAI/tutorials/menus/"><span>Menus</span></a></li><li><a lang="en" href="/WAI/tutorials/menus/application-menus/" aria-current="page"><span>Application Menus</span></a></li></ul> </nav> <div class="default-grid with-gap leftcol"> <div class="sidenav"><nav class="sn-contents" aria-label="Secondary"> <ul class="sidenav--list"> <li> <a lang="en" href="/WAI/design-develop/" class="page-link"><span>Design & Develop</span></a></li><li> <a lang="en" href="/WAI/tips/writing/" class="page-link"><span>Tips for Writing</span></a></li><li> <a lang="en" href="/WAI/tips/designing/" class="page-link"><span>Tips for Designing</span></a></li><li> <a lang="en" href="/WAI/tips/developing/" class="page-link"><span>Tips for Developing</span></a></li><li> <a lang="en" href="/WAI/media/av/" class="page-link"><span>Audio & Video Media</span></a><ul><li> <a lang="en" href="/WAI/media/av/users-orgs/" class="page-link"><span>User Needs</span></a></li><li> <a lang="en" href="/WAI/media/av/planning/" class="page-link"><span>Planning</span></a></li><li> <a lang="en" href="/WAI/media/av/av-content/" class="page-link"><span>Audio Content & Video Content</span></a></li><li> <a lang="en" href="/WAI/media/av/description/" class="page-link"><span>Description</span></a></li><li> <a lang="en" href="/WAI/media/av/captions/" class="page-link"><span>Captions/Subtitles</span></a></li><li> <a lang="en" href="/WAI/media/av/transcripts/" class="page-link"><span>Transcripts</span></a></li><li> <a lang="en" href="/WAI/media/av/transcribing/" class="page-link"><span>Transcribing Audio to Text</span></a></li><li> <a lang="en" href="/WAI/media/av/sign-languages/" class="page-link"><span>Sign Languages</span></a></li><li> <a lang="en" href="/WAI/media/av/player/" class="page-link"><span>Media Player</span></a></li></ul></li><li> <a lang="en" href="/WAI/tutorials/" aria-current="location" class="page-link"><span>Tutorials</span></a><ul><li> <a lang="en" href="/WAI/tutorials/page-structure/" class="page-link"><span>Page Structure</span></a><ul><li> <a lang="en" href="/WAI/tutorials/page-structure/regions/" class="page-link"><span>Page Regions</span></a></li><li> <a lang="en" href="/WAI/tutorials/page-structure/labels/" class="page-link"><span>Labeling Regions</span></a></li><li> <a lang="en" href="/WAI/tutorials/page-structure/headings/" class="page-link"><span>Headings</span></a></li><li> <a lang="en" href="/WAI/tutorials/page-structure/content/" class="page-link"><span>Content Structure</span></a></li><li> <a lang="en" href="/WAI/tutorials/page-structure/example/" class="page-link"><span>Full Example</span></a></li></ul></li><li> <a lang="en" href="/WAI/tutorials/menus/" aria-current="location" class="page-link"><span>Menus</span></a><ul><li> <a lang="en" href="/WAI/tutorials/menus/structure/" class="page-link"><span>Structure</span></a></li><li> <a lang="en" href="/WAI/tutorials/menus/styling/" class="page-link"><span>Styling</span></a></li><li> <a lang="en" href="/WAI/tutorials/menus/flyout/" class="page-link"><span>Fly-Out Menus</span></a></li> <li> <a lang="en" href="/WAI/tutorials/menus/application-menus/" aria-current="page" class="page-link"><span>Application Menus</span></a></li><li> <a lang="en" href="/WAI/tutorials/menus/application-menus-code/" class="page-link"><span>Application Menu Example & Code</span></a></li></ul></li><li> <a lang="en" href="/WAI/tutorials/images/" class="page-link"><span>Images</span></a><ul><li> <a lang="en" href="/WAI/tutorials/images/informative/" class="page-link"><span>Informative Images</span></a></li><li> <a lang="en" href="/WAI/tutorials/images/decorative/" class="page-link"><span>Decorative Images</span></a></li><li> <a lang="en" href="/WAI/tutorials/images/functional/" class="page-link"><span>Functional Images</span></a></li><li> <a lang="en" href="/WAI/tutorials/images/textual/" class="page-link"><span>Images of Text</span></a></li><li> <a lang="en" href="/WAI/tutorials/images/complex/" class="page-link"><span>Complex Images</span></a></li><li> <a lang="en" href="/WAI/tutorials/images/groups/" class="page-link"><span>Groups of Images</span></a></li><li> <a lang="en" href="/WAI/tutorials/images/imagemap/" class="page-link"><span>Image Maps</span></a></li><li> <a lang="en" href="/WAI/tutorials/images/decision-tree/" class="page-link"><span>An <code style="color: inherit;">alt</code> Decision Tree</span></a></li><li> <a lang="en" href="/WAI/tutorials/images/tips/" class="page-link"><span>Tips and Tricks</span></a></li></ul></li><li> <a lang="en" href="/WAI/tutorials/tables/" class="page-link"><span>Tables</span></a><ul><li> <a lang="en" href="/WAI/tutorials/tables/one-header/" class="page-link"><span>One Header</span></a></li><li> <a lang="en" href="/WAI/tutorials/tables/two-headers/" class="page-link"><span>Two Headers</span></a></li><li> <a lang="en" href="/WAI/tutorials/tables/irregular/" class="page-link"><span>Irregular Headers</span></a></li><li> <a lang="en" href="/WAI/tutorials/tables/multi-level/" class="page-link"><span>Multi-level Headers</span></a></li><li> <a lang="en" href="/WAI/tutorials/tables/caption-summary/" class="page-link"><span>Caption & Summary</span></a></li><li> <a lang="en" href="/WAI/tutorials/tables/tips/" class="page-link"><span>Tips and Tricks</span></a></li></ul></li><li> <a lang="en" href="/WAI/tutorials/forms/" class="page-link"><span>Forms</span></a><ul><li> <a lang="en" href="/WAI/tutorials/forms/labels/" class="page-link"><span>Labeling Controls</span></a></li><li> <a lang="en" href="/WAI/tutorials/forms/grouping/" class="page-link"><span>Grouping Controls</span></a></li><li> <a lang="en" href="/WAI/tutorials/forms/instructions/" class="page-link"><span>Form Instructions</span></a></li><li> <a lang="en" href="/WAI/tutorials/forms/validation/" class="page-link"><span>Validating Input</span></a></li><li> <a lang="en" href="/WAI/tutorials/forms/notifications/" class="page-link"><span>User Notifications</span></a></li><li> <a lang="en" href="/WAI/tutorials/forms/multi-page/" class="page-link"><span>Multi-page Forms</span></a></li><li> <a lang="en" href="/WAI/tutorials/forms/custom-controls/" class="page-link"><span>Custom Controls</span></a></li></ul></li><li> <a lang="en" href="/WAI/tutorials/carousels/" class="page-link"><span>Carousels</span></a><ul><li> <a lang="en" href="/WAI/tutorials/carousels/structure/" class="page-link"><span>Structure</span></a></li><li> <a lang="en" href="/WAI/tutorials/carousels/functionality/" class="page-link"><span>Functionality</span></a></li><li> <a lang="en" href="/WAI/tutorials/carousels/animations/" class="page-link"><span>Animations</span></a></li><li> <a lang="en" href="/WAI/tutorials/carousels/styling/" class="page-link"><span>Styling</span></a></li><li> <a lang="en" href="/WAI/tutorials/carousels/working-example/" class="page-link"><span>Working Example</span></a></li><li> <a lang="en" href="/WAI/tutorials/carousels/full-code/" class="page-link"><span>Complete Code</span></a></li></ul></li></ul></li></ul></nav> </div> <main id="main" lang="en"> <header class="in-resource"> <h1> Application Menus </h1><p>in <a lang="en" href="/WAI/tutorials/menus/"><span>Menus Tutorial</span></a></p></header> <aside class="box box-full"><header class="box-h box-h-full"> <h2> Overview </h2></header><div class="box-i"> <p>Web application menus use the same basic structure as navigation menus. They often consist of a horizontal menu bar and use fly-out functionality. However, additional markup and keyboard behavior must be added.</p> </div></aside> <nav class="box box-simple" aria-labelledby="tocheading" id="toc"> <header id="tocheading" class="box-h box-h-simple"> Page Contents</header> <div class="box-i"> <ul id="markdown-toc"> <li><a href="#additional-markup" id="markdown-toc-additional-markup">Additional markup</a></li> <li><a href="#functionality" id="markdown-toc-functionality">Functionality</a></li> <li><a href="#keyboard-behavior" id="markdown-toc-keyboard-behavior">Keyboard behavior</a> <ul> <li><a href="#top-level-menu-items" id="markdown-toc-top-level-menu-items">Top-Level Menu Items</a></li> <li><a href="#submenu-items" id="markdown-toc-submenu-items">Submenu Items</a></li> </ul> </li> </ul> </div> </nav> <h2 id="additional-markup">Additional markup</h2> <p>In addition to the <code class="language-plaintext highlighter-rouge">aria-expanded</code> and <code class="language-plaintext highlighter-rouge">aria-haspopup</code> attributes, the following WAI-ARIA roles are used to provide the necessary semantics of an application menu:</p> <ul> <li><strong><code class="language-plaintext highlighter-rouge">menubar</code>:</strong> Represents a (usually horizontal) menu bar.</li> <li><strong><code class="language-plaintext highlighter-rouge">menu</code>:</strong> Represents a set of links or commands in a menu bar, it is used for the fly-out menus.</li> <li><strong><code class="language-plaintext highlighter-rouge">menuitem</code>:</strong> Represents an individual menu item.</li> <li><strong><code class="language-plaintext highlighter-rouge">separator</code>:</strong> Represents a separator between two groups of menu items in a menu.</li> </ul> <aside class="box box-example"><header class="box-h box-h-example"> Code: </header><div class="box-i"> <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><ul</span> <span class="na">role=</span><span class="s">"menubar"</span> <span class="na">id=</span><span class="s">"appmenu"</span><span class="nt">></span> … <span class="nt"><li</span> <span class="na">role=</span><span class="s">"menuitem"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span><span class="nt">></span> Edit <span class="nt"><ul</span> <span class="na">role=</span><span class="s">"menu"</span><span class="nt">></span> <span class="nt"><li</span> <span class="na">role=</span><span class="s">"menuitem"</span><span class="nt">></span>Undo<span class="nt"></li></span> <span class="nt"><li</span> <span class="na">role=</span><span class="s">"menuitem"</span><span class="nt">></span>Redo<span class="nt"></li></span> <span class="nt"><li</span> <span class="na">role=</span><span class="s">"separator"</span><span class="nt">></li></span> <span class="nt"><li</span> <span class="na">role=</span><span class="s">"menuitem"</span><span class="nt">></span>Cut<span class="nt"></li></span> <span class="nt"><li</span> <span class="na">role=</span><span class="s">"menuitem"</span><span class="nt">></span>Copy<span class="nt"></li></span> <span class="nt"><li</span> <span class="na">role=</span><span class="s">"menuitem"</span><span class="nt">></span>Paste<span class="nt"></li></span> <span class="nt"></ul></span> <span class="nt"></li></span> … <span class="nt"></ul></span> </code></pre></div></div> </div></aside> <p>Application menus typically do not have links and rely on scripting to provide the functionality.</p> <h2 id="functionality">Functionality</h2> <p>Adding the WAI-ARIA roles does <strong>not</strong> automatically enable the menu’s functionality or keyboard behavior. These must be added using scripting. A detailed explanation on the WAI-ARIA attributes and keyboard behavior can be found in the <a href="https://www.w3.org/TR/wai-aria-practices/#menu">WAI-ARIA Authoring Practices document (draft)</a>.</p> <h2 id="keyboard-behavior">Keyboard behavior</h2> <p>Web application menus are expected to work like desktop application menus. For example, the left and right keys are used to iterate through the top-level items, and the up and down arrows are used to navigate submenus. Pressing the tab key focuses the next item after the menu instead of the next menu item.</p> <p>To allow focus to be set to menu items by keyboard, the items are given a <code class="language-plaintext highlighter-rouge">tabindex</code> attribute with the value <code class="language-plaintext highlighter-rouge">-1</code>. The first main menu item (“File” in this example) is assigned a <code class="language-plaintext highlighter-rouge">tabindex</code> value of <code class="language-plaintext highlighter-rouge">0</code> which adds it to the tab order and lets the user access the menu using the keyboard.</p> <aside class="box box-example"><header class="box-h box-h-example"> Code: </header><div class="box-i"> <div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">Array</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">forEach</span><span class="p">.</span><span class="nf">call</span><span class="p">(</span><span class="nx">appsMenuItems</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">el</span><span class="p">,</span> <span class="nx">i</span><span class="p">){</span> <span class="k">if </span><span class="p">(</span><span class="mi">0</span> <span class="o">==</span> <span class="nx">i</span><span class="p">)</span> <span class="p">{</span> <span class="nx">el</span><span class="p">.</span><span class="nf">setAttribute</span><span class="p">(</span><span class="dl">'</span><span class="s1">tabindex</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">0</span><span class="dl">'</span><span class="p">);</span> <span class="nx">el</span><span class="p">.</span><span class="nf">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">focus</span><span class="dl">"</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> <span class="nx">currentIndex</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="p">});</span> <span class="p">}</span> <span class="k">else</span> <span class="p">{</span> <span class="nx">el</span><span class="p">.</span><span class="nf">setAttribute</span><span class="p">(</span><span class="dl">'</span><span class="s1">tabindex</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">-1</span><span class="dl">'</span><span class="p">);</span> <span class="p">}</span> <span class="p">});</span> <span class="nb">Array</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">forEach</span><span class="p">.</span><span class="nf">call</span><span class="p">(</span><span class="nx">subMenuItems</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">el</span><span class="p">,</span> <span class="nx">i</span><span class="p">){</span> <span class="nx">el</span><span class="p">.</span><span class="nf">setAttribute</span><span class="p">(</span><span class="dl">'</span><span class="s1">tabindex</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">-1</span><span class="dl">'</span><span class="p">);</span> <span class="p">});</span> </code></pre></div></div> </div></aside> <h3 id="top-level-menu-items">Top-Level Menu Items</h3> <p>The following table summarizes the typical behavior of top-level menu items:</p> <table> <caption>Key mapping for top-level menu items</caption> <thead> <tr> <th scope="col">Key</th> <th scope="col">Action</th> </tr> </thead> <tbody> <tr> <th scope="row"><kbd>tab ⇥</kbd></th> <td>Select the next focusable element outside of the menu.</td> </tr> <tr> <th scope="row"><kbd>shift ⇧</kbd> + <kbd>tab ⇥</kbd></th> <td>Select the previous focusable element outside of the menu.</td> </tr> </tbody> <tbody> <tr> <th scope="row"><kbd>right →</kbd></th> <td>Select the next top-level menu item.</td> </tr> <tr> <th scope="row"><kbd>left ←</kbd></th> <td>Select the previous top-level menu item.</td> </tr> </tbody> <tbody> <tr> <th scope="row"><kbd>return/enter &crarr;</kbd></th> <td rowspan="3">Open the submenu, select first submenu item.</td> </tr> <tr> <th scope="row"><kbd>space</kbd></th> </tr> <tr> <th scope="row"><kbd>down ↓</kbd></th> </tr> </tbody> <tbody> <tr> <th scope="row"><kbd>up ↑</kbd></th> <td>Open the submenu, select last submenu item.</td> </tr> </tbody> <tbody> <tr> <th scope="row"><kbd>esc</kbd></th> <td>Leave the menu.</td> </tr> </tbody> </table> <h3 id="submenu-items">Submenu Items</h3> <p>The following table summarizes the typical behavior of submenu items:</p> <table> <caption>Key mapping for submenu items</caption> <thead> <tr> <th scope="col">Key</th> <th scope="col">Action</th> </tr> </thead> <tbody> <tr> <th scope="row"><kbd>tab ⇥</kbd></th> <td>Close the submenu, select the next focusable element outside of the menu.</td> </tr> <tr> <th scope="row"><kbd>shift ⇧</kbd> + <kbd>tab ⇥</kbd></th> <td>Close the submenu, select the previous focusable element outside of the menu.</td> </tr> </tbody> <tbody> <tr> <th scope="row"><kbd>right →</kbd></th> <td>Close the submenu, select the first item of the next top-level menu item.</td> </tr> <tr> <th scope="row"><kbd>left ←</kbd></th> <td>Close the submenu, select the first item of the previous top-level menu item.</td> </tr> </tbody> <tbody> <tr> <th scope="row"><kbd>return/enter &crarr;</kbd></th> <td rowspan="2">Carry out function of this item. (In this example: bring up a dialog box with the text of the chosen menu item.)</td> </tr> <tr> <th scope="row"><kbd>space</kbd></th> </tr> </tbody> <tbody> <tr> <th scope="row"><kbd>down ↓</kbd></th> <td>Select next submenu item.</td> </tr> </tbody> <tbody> <tr> <th scope="row"><kbd>up ↑</kbd></th> <td>Select previous submenu item.</td> </tr> </tbody> <tbody> <tr> <th scope="row"><kbd>esc</kbd></th> <td>Close the submenu, select the current top-level menu item.</td> </tr> </tbody> </table> <nav class="pager" aria-label="Previous/Next Page" style="clear: both;"> <ul><li class="pager--item previous"> <a href="/WAI/tutorials/menus/flyout/"> <svg focusable="false" aria-hidden="true" class="icon-arrow-left pager--item-icon"><use xlink:href="/WAI/assets/images/icons.svg#icon-arrow-left"></use></svg> <span class="pager--item-text"> <span class="pager--item-text-direction">Previous:</span> <span class="pager--item-text-target">Fly-out Menus</span> </span> </a> </li><li class="pager--item next"> <a href="/WAI/tutorials/menus/application-menus-code/"> <svg focusable="false" aria-hidden="true" class="icon-arrow-right pager--item-icon"><use xlink:href="/WAI/assets/images/icons.svg#icon-arrow-right"></use></svg> <span class="pager--item-text"> <span class="pager--item-text-direction">Next:</span> <span class="pager--item-text-target">Application Menu Example & Code</span> </span> </a> </li> </ul></nav><aside class="box box-icon box-space-above" id="helpimprove" aria-label="feedback"><header class="box-h box-h-icon box-h-space-above box-h-icon"> <svg focusable="false" aria-hidden="true" class="icon-comments "><use xlink:href="/WAI/assets/images/icons.svg#icon-comments"></use></svg> <h2> Help improve this page </h2></header><div class="box-i"><p>Please share your ideas, suggestions, or comments via e-mail to the publicly-archived list <a href="mailto:wai@w3.org?body=%5Binclude%20a%20relevant%20email%20Subject%5D%0A%0A%5Bput%20comment%20here...%5D%0A%0AI%20give%20permission%20to%20share%20this%20to%20a%20publicly-archived%20e-mail%20list.">wai@w3.org</a> or via GitHub.</p> <div class="button-group"> <a href="mailto:wai@w3.org?body=%5Binclude%20a%20relevant%20email%20Subject%5D%0A%0A%5Bput%20comment%20here...%5D%0A%0AI%20give%20permission%20to%20share%20this%20to%20a%20publicly-archived%20e-mail%20list." class="button"><span>E-mail</span></a><a href=" https://github.com/w3c/wai-website/edit/main/pages/design-develop/tutorials/menus/application-menus.md " class="button"><span>Fork & Edit on GitHub</span></a><a href="https://github.com/w3c/wai-website/issues/new?template=content-issue.yml&wai-resource-id=wai-tutorials&wai-url=https://www.w3.org/WAI/tutorials/menus/application-menus/" class="button"><span>New GitHub Issue</span></a></div></div></aside> <a class="button button-backtotop" href="#top"><span><svg focusable="false" aria-hidden="true" class="icon-arrow-up "><use xlink:href="/WAI/assets/images/icons.svg#icon-arrow-up"></use></svg> Back to Top</span></a> </main> </div> <footer id="wai-site-footer" class="page-footer default-grid" aria-label="Page"> <div class="inner"> <div><strong>Status:</strong> Updated 02 August 2018 </div> <div> Editors: <ul class="sentence"> <li><a href="https://www.w3.org/People/yatil/">Eric Eggert</a></li> <li><a href="https://www.w3.org/People/shadi/">Shadi Abou-Zahra</a></li> </ul>   Update Editor: <ul class="sentence"> <li>Brian Elton</li> </ul>   Contributors: <ul class="sentence"> <li>see <a href="/WAI/tutorials/acknowledgements/">Acknowledgements</a></li> </ul> </div> <p>Developed by the Education and Outreach Working Group (<a href="https://www.w3.org/groups/wg/eowg">EOWG</a>). Developed with support from the <a href="https://www.w3.org/WAI/ACT/">WAI-ACT project</a>, co-funded by the <strong>European Commission <abbr title="Information Society Technologies">IST</abbr> Programme</strong>.</p> </div> </footer><footer class="site-footer grid-4q" aria-label="Site"> <div class="q1-start q3-end about"> <div> <p><a class="largelink" href="https://www.w3.org/WAI/" lang="en" dir="auto" translate="no">W3C Web Accessibility Initiative (WAI)</a></p> <p>Strategies, standards, and supporting resources to make the Web accessible to people with disabilities.</p> </div> <div class="social" lang="en" dir="auto" translate="no"> <ul> <li><a href="https://w3c.social/@wai"><svg focusable="false" aria-hidden="true" class="icon-mastodon "><use xlink:href="/WAI/assets/images/icons.svg#icon-mastodon"></use></svg> Mastodon</a></li> <li><a href="https://www.linkedin.com/company/w3c-wai/"><svg focusable="false" aria-hidden="true" class="icon-linkedin "><use xlink:href="/WAI/assets/images/icons.svg#icon-linkedin"></use></svg> LinkedIn</a></li> <li><a href="https://www.w3.org/WAI/feed.xml"><svg focusable="false" aria-hidden="true" class="icon-rss "><use xlink:href="/WAI/assets/images/icons.svg#icon-rss"></use></svg> Feed</a></li> <li><a href="https://www.youtube.com/channel/UCU6ljj3m1fglIPjSjs2DpRA/playlists/"><svg focusable="false" aria-hidden="true" class="icon-youtube "><use xlink:href="/WAI/assets/images/icons.svg#icon-youtube"></use></svg> YouTube</a></li> <li><a href="https://www.w3.org/WAI/news/subscribe/" class="button">Get News in Email</a></li> </ul> </div> <div lang="en" dir="auto" translate="no"> <p>Copyright © 2025 World Wide Web Consortium (<a href="https://www.w3.org/">W3C</a><sup>®</sup>). See <a href="/WAI/about/using-wai-material/">Permission to Use WAI Material</a>.</p> </div> </div> <div lang="en" dir="auto" translate="no" class="q4-start q4-end"> <ul style="margin-bottom:0"> <li><a href="/WAI/about/contacting/">Contact WAI</a></li> <li><a href="/WAI/sitemap/">Site Map</a></li> <li><a href="/WAI/news/">News</a></li> <li><a href="/WAI/sitemap/#archive">Archive</a></li> <li><a href="/WAI/about/accessibility-statement/">Accessibility Statement</a></li> <li><a href="/WAI/translations/"> Translations</a></li> <li><a href="/WAI/roles/">Resources for Roles</a></li> </ul> </div> </footer> <script src="/WAI/assets/scripts/details4everybody.js?1739541174349523255"></script>  <script src="/WAI/assets/scripts/svg4everybody.js?1739541174349523255"></script> <script> svg4everybody(); </script><script> var translationStrings = {}; </script> </body> </html>