Disclosure Pattern for Navigation Menus
The following example demonstrates using the disclosure design pattern to create a dropdown navigation bar.
Note: although this pattern uses the word "menu" in the colloquial sense to refer to a set of navigation links, it does not use a menu role.
Similar examples include:
- Example Disclosure (Show/Hide) for Answers to Frequently Asked Questions
- Example Disclosure (Show/Hide) for an Image Description
Example
Mythical University
Sample content section. Activating a link above will update and navigate to this region.
Accessibility Features
- Since this disclosure example is being used as navigation, the entire control is wrapped in a navigation landmark. Each disclosure button / container pair is contained within a list item so that the number of top-level items is semantically available.
- Arrow keys supplement, but do not replace, tabbing between the top-level disclosure buttons. Home and End likewise allow jumping to the first and last button.
- Escape pressed when focus is within the navigation region closes any open dropdowns. Moving focus out of the navigation region also closes open dropdowns. Implementing the escape key behavior is necessary to meet the WCAG 2.1 1.4.13: Content on Hover or Focus criterion.
- Arrow key support prevents the default page scroll behavior when focus is on the disclosure dropdown.
- Arrow key navigation is primarily for the benefit of keyboard users who are not running a screen reader; screen readers will usually intercept the arrow keys and not pass them to the page.
-
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.
Keyboard Support
Key | Function |
---|---|
Tab | Moves keyboard focus between top-level buttons, and into and then through the links in any open dropdown. |
Space or Enter |
Activates the disclosure button, which toggles the visibility of the dropdown. |
Escape | Closes the open dropdown. |
Arrow keys (optional) | Moves focus between the top-level disclosure buttons and between open dropdown links. |
Home / End (optional) | Moves focus to the first or last disclosure button, or first or last open dropdown's links. |
Role, Property, State, and Tabindex Attributes
Role | Attribute | Element | Usage |
---|---|---|---|
aria-controls="IDREF"
|
button
|
The disclosure button controls visibility of the container identified by the IDREF value.
|
|
aria-expanded="false"
|
button
|
|
|
aria-expanded="true"
|
button
|
|
Javascript and CSS Source Code
- CSS: disclosure-navigation.css
- Javascript: disclosureMenu.js
HTML Source Code