Disclosure navigation

Why it is accessible

A “hamburger” menu is often invisible to a keyboard and a screen reader: an icon with no name, a menu with no state, and focus that vanishes once it closes. Here the button is a plain button with the text “Menu” and an aria-expanded attribute, so a screen reader says “Menu, button, collapsed” and, once opened, “expanded”. The button sits in the Tab order directly before the list it controls.

Collapsing only happens below roughly 768px, and only once the script has actually loaded. On a wide screen the navigation is always visible and the button doesn't exist. The skip links at the top of the page lead to the main content, to search and settings, and to the footer; the navigation sits right after the logo, so there is nothing to skip to.

Test it yourself

Keyboard

Narrow the window below 768px. Tab to the Menu button; Enter opens it.
Tab moves through the items; Escape closes the menu and returns focus to the button.
Clicking outside the menu also closes it.

The button announces the name “Menu” and the collapsed / expanded state. The navigation is a region named “Main navigation”, so you can also jump to it from a list of regions.

Zoom and reflow

At 400% zoom the page behaves as it would on a phone: the navigation collapses and the links are at least 44px tall.

Without JavaScript

The list of links is shown at every screen width. The Menu button is created only by the script, so without it nothing is missing and nothing gets in the way.

Code to copy

<ad-disclosure-nav data-open-label="Menu">
  <nav id="site-navigation" aria-label="Main navigation">
    <ul role="list">
      <li><a href="/en/about/">About us</a></li>
      <li><a href="/en/services/">Services</a></li>
    </ul>
  </nav>
</ad-disclosure-nav>
<link rel="stylesheet" href="/assets/js/components/ad-disclosure-nav/ad-disclosure-nav.css">
<script type="module" src="/assets/js/components/ad-disclosure-nav/ad-disclosure-nav.js"></script>

Demo