Example Disclosure Navigation Menu

Although this example uses the word "menu" in the colloquial sense to refer to a set of navigation links, it does not use the WAI-ARIA menu role. That is because the menu and menubar roles require complex functionality, such as composite widget focus management and first-character navigation, that is unnecessary for typical site navigation.

The following example demonstrates using the disclosure design pattern to show and hide dropdown lists of links in a navigation bar for a mythical university web site. Each disclosure button represents a section of the web site, and expanding it shows a list of links to pages within that section.

Similar examples include:

Example Usage Options

This example demonstrates two different ways of implementing keyboard support. Toggle between them with the following checkbox.

Include optional support for arrow keys, Home, and End

Example

Mythical University

Sample content section. Activating a link above will update and navigate to this region.

Accessibility Features

Since this set of disclosure buttons controls visibility of navigation links for the mythical university web site, the list that contains them is wrapped in a navigation landmark named Mythical University.
The semantics of the list structure communicates the hierarchy of the navigation system to assistive technology users. The top-level set of three buttons is in a list of three items, and the set of links controlled by each button is contained within a list nested inside the item with the controlling button.
If a dropdown is open and focus is inside the navigation region, pressing Esc will close the dropdown. Moving focus out of the navigation region also closes an open dropdown. Implementing this Esc behavior is necessary to meet the WCAG 2.1 1.4.13: Content on Hover or Focus criterion.
The visual indicator of the show/hide state is created using CSS ::after pseudo element border styles so the caret is reliably rendered in high contrast mode of operating systems and browsers.
Optional navigation keys (Arrow keys, Home, and End):
1. Implementing the optional arrow key support prevents the default page scroll behavior when focus is contained within the navigation region.
2. Optional navigation key support is primarily for the benefit of keyboard users who are not running a screen reader. Screen readers that have both reading and interaction modes intercept these navigation keys and do not pass them to the page when the screen reader is in reading mode. When interacting with this example, such screen readers are typically in reading mode because this example does not use a widget role that triggers screen reader interaction mode.
3. If implemented, the optional navigation keys supplement, but do not replace, tabbing among buttons and links. This is because the buttons and links are not contained by an element with a widget role, such as grid, that is expected to occupy only one stop in the page Tab sequence and manage focus for all its descendants.

Keyboard Support

Key	Function
`Tab` `Shift + Tab`	Move keyboard focus among top-level buttons, and if a dropdown is open, into and through links in the dropdown.
`Space` or `Enter`	If focus is on a disclosure button, activates the button, which toggles the visibility of the dropdown. If focus is on a link: If any link has `aria-current` set, removes it. Sets `aria-current="page"` on the focused link. Activates the focused link.
`Escape`	If a dropdown is open, closes it and sets focus on the button that controls that dropdown.
`Down Arrow` or `Right Arrow` (Optional)	If focus is on a button and its dropdown is collapsed, and it is not the last button, moves focus to the next button. if focus is on a button and its dropdown is expanded, moves focus to the first link in the dropdown. If focus is on a link, and it is not the last link, moves focus to the next link.
`Up Arrow` or `Left Arrow` (Optional)	If focus is on a button, and it is not the first button, moves focus to the previous button. If focus is on a link, and it is not the first link, moves focus to the previous link.
`Home` (Optional)	If focus is on a button, and it is not the first button, moves focus to the first button. If focus is on a link, and it is not the first link, moves focus to the first link.
`End` (Optional)	If focus is on a button, and it is not the last button, moves focus to the last button. If focus is on a link, and it is not the last link, moves focus to the last link.

Role, Property, State, and Tabindex Attributes

Attribute	Element	Usage
`aria-controls="IDREF"`	`button`	The disclosure button controls visibility of the container identified by the `IDREF` value.
`aria-expanded="false"`	`button`	Indicates that the container controlled by the disclosure button is hidden. CSS attribute selectors (e.g. `[aria-expanded="false"]`) are used to synchronize the visual states with the value of the `aria-expanded` attribute.
`aria-expanded="true"`	`button`	Indicates that the container controlled by the disclosure button is visible. CSS attribute selectors (e.g. `[aria-expanded="true"]`) are used to synchronize the visual states with the value of the `aria-expanded` attribute.
`aria-current="page"`	`a`	Indicates that the page referenced by the link is currently displayed.

Javascript and CSS Source Code

CSS: disclosure-navigation.css
Javascript: disclosureMenu.js

HTML Source Code

<nav aria-label="Mythical University">
  <ul id="exTest" class="disclosure-nav">
    <li>
      <button type="button"
              aria-expanded="true"
              aria-controls="id_about_menu">
        About
      </button>
      <ul id="id_about_menu">
        <li>
          <a href="#mythical-page-content">
            Overview
          </a>
        </li>
        <li>
          <a href="#mythical-page-content">
            Administration
          </a>
        </li>
        <li>
          <a href="#mythical-page-content">
            Facts
          </a>
        </li>
        <li>
          <a href="#mythical-page-content">
            Campus Tours
          </a>
        </li>
      </ul>
    </li>
    <li>
      <button type="button"
              aria-expanded="true"
              aria-controls="id_admissions_menu">
        Admissions
      </button>
      <ul id="id_admissions_menu">
        <li>
          <a href="#mythical-page-content">
            Apply
          </a>
        </li>
        <li>
          <a href="#mythical-page-content">
            Tuition
          </a>
        </li>
        <li>
          <a href="#mythical-page-content">
            Sign Up
          </a>
        </li>
        <li>
          <a href="#mythical-page-content">
            Visit
          </a>
        </li>
        <li>
          <a href="#mythical-page-content">
            Photo Tour
          </a>
        </li>
        <li>
          <a href="#mythical-page-content">
            Connect
          </a>
        </li>
      </ul>
    </li>
    <li>
      <button type="button"
              aria-expanded="true"
              aria-controls="id_academics_menu">
        Academics
      </button>
      <ul id="id_academics_menu">
        <li>
          <a href="#mythical-page-content">
            Colleges & Schools
          </a>
        </li>
        <li>
          <a href="#mythical-page-content">
            Programs of Study
          </a>
        </li>
        <li>
          <a href="#mythical-page-content">
            Honors Programs
          </a>
        </li>
        <li>
          <a href="#mythical-page-content">
            Online Courses
          </a>
        </li>
        <li>
          <a href="#mythical-page-content">
            Course Explorer
          </a>
        </li>
        <li>
          <a href="#mythical-page-content">
            Register for Class
          </a>
        </li>
        <li>
          <a href="#mythical-page-content">
            Academic Calendar
          </a>
        </li>
        <li>
          <a href="#mythical-page-content">
            Transcripts
          </a>
        </li>
      </ul>
    </li>
  </ul>
</nav>
<div id="mythical-page-content"
     class="disclosure-page-content"
     tabindex="-1"
     role="region"
     aria-label="Mythical University sample page content">
  <h3 id="mythical-page-heading">
    Mythical University
  </h3>
  <p>
    Sample content section. Activating a link above will update and navigate to this region.
  </p>
</div>