Skip to content

Example Disclosure Navigation Menu with Top-Level Links

Example Disclosure Navigation Menu with Top-Level Links

Read This First

The code in this example is not intended for production environments. Before using it for any purpose, read this to understand why.

This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.

About This Example

Important

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. This implementation of site navigation does not use the menu role because it does not provide the complex functionality that assistive technologies expect in a widget that has the menu role. Typical site navigation does not need all the keyboard interactions specified by the menu and menubar pattern.

The following example demonstrates using the Disclosure Pattern to show and hide dropdown lists of links in a navigation bar for a mythical university web site. Unlike the other disclosure navigation menu example, this example includes top-level links alongside the disclosure buttons.

Similar examples include:

Example Usage Options

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

Example

Mythical University
Using a disclosure + link pattern for navigation

Home

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

Mythical University footer information

Accessibility Features

  1. Since this set of links and disclosure buttons provides navigation for the mythical university web site, the list that contains them is wrapped in a navigation landmark named Mythical University.
  2. The semantics of the list structure communicate the hierarchy of the navigation system to assistive technology users. The top-level list has three items where each item contains a top-level link and an associated disclosure button. The set of links controlled by a disclosure button is in a list nested inside the list item that contains the button.
  3. 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.
  4. Optional navigation keys (Arrow keys, Home, and End):
    1. Enabling 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 links and buttons, and if a dropdown is open, 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 top-level link or button with a collapsed dropdown, and it is not the last top-level item, moves focus to the next top-level link or button.
  • if focus is on a top-level button and its dropdown is expanded, moves focus to the first link in the dropdown.
  • If focus is on a link within an expanded dropdown, and it is not the last link, moves focus to the next link.
Up Arrow or
Left Arrow
(Optional)
  • If focus is on a top-level link or button, and it is not the first item, moves focus to the previous link or button.
  • If focus is on a link within an expanded dropdown, and it is not the first link, moves focus to the previous link.
Home (Optional)
  • If focus is on a top-level link button, and it is not the first item, moves focus to the first item.
  • If focus is on a link within an expanded dropdown, and it is not the first link, moves focus to the first link.
End (Optional)
  • If focus is on a top-level link or button, and it is not the last item, moves focus to the last item.
  • If focus is on a link within an expanded dropdown, and it is not the last link, moves focus to the last link.

Role, Property, State, and Tabindex Attributes

Role Attribute Element Usage
aria-controls="IDREF" button Indicates that 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

HTML Source Code

To copy the following HTML code, please open it in CodePen.

Back to Top