Accessibility Examples: Responsive Navigation Menus

This example showcases a responsive navigation menu with a hamburger button to toggle the menu in a mobile view. In this type of disclosure pattern, it can be undesirable to implement a full ARIA menu, as is shown in the Menu Toggle Button example. Rather, an ARIA disclosure pattern followed by standard HTML navigation menu is all that is necessary.

Required HTML Markup

A menu toggle must indicate whether its associated menu is expanded or collapsed. This requires the following ARIA attributes:

• aria-expanded – Set to true if the menu is expanded; false if the menu is collapsed.
• aria-controls – Set to the HTML id of the menu toggled by this button.

JavaScript is needed to toggle the values of the aria-expanded state and to update the visual state of the menu. Note that the value of the aria-controls property does not change.

Interaction Pattern

The following interaction pattern must be scripted for a simple responsive menu disclosure pattern:

• When a user activates the menu toggle, the menu must expand or collapse. The value of aria-expanded must be toggled appropriately to match the menu's visual state.
• If the menu is expanded and the user clicks somewhere else on the page, the menu must collapse. This is done by attached a click handler to the document. You must ensure that your click handler does nothing if the user clicked on the toggle button.
• If the user shift-tabs away from the menu toggle, the menu must collapse if it was expanded. This is done by attached a keydown handler to the menu toggle. This handler must close the menu if the shift key and tab key are pressed.
• If the user tabs away from the last menu item, the menu must collapse. This can be done by attaching a keydown handler to the last menu item; closing the menu if the user presses the tab key (but not the shift key).

Note: In all of the cases above, be sure to set the value of aria-expanded to match the visual state of the menu: true if expanded, and false if collapsed.

Handling Window Resize

An illegal state can be created if the user on a desktop device resizes the window to be narrower while focus is on one of the menu items. The problem is that, if a menu item is in focus in the desktop view, switching to the mobile view will cause the menu to be hidden. It is an illegal state for browser focus to be on an item that is hidden. Creating this state can cause confusion and inconsistent behavior (including crashes) from assistive technology. If focus is on a menu item in the desktop view, the menu must remain open in the mobile view when the window is resized.

To keep the menu open when resizing to the mobile view, attach a focus handler to each of the menu items. This handler should set aria-expanded to true and apply any necessary CSS to expand the menu when a menu item receives focus. If your CSS is correct, no visual change will occur in the dekstop view. The effect will be to keep the menu expanded if a user resizes the window from desktop to mobile view.