Navigation

Accessible dropdown navigation: Examples and Testing

Published by whatisADA / Grow Wild Agency · Updated September 11, 2026

What to build

Most website dropdown navigation is a disclosure containing ordinary links, not an application menu. Keep normal link behavior and Tab navigation while making the disclosure's state and closing behavior clear.

A practical example

A Learn button opens links to Guides, WCAG Reference and Glossary. Keyboard users can open it, Tab through the links and close it without having to discover an application-menu key model.

Try the example

Use Tab and your keyboard controls, then compare the behavior with the checks below. This is an isolated learning example; test the complete pattern in your own product and assistive technology setup.

How to check it

Activate the disclosure and inspect its expanded state and panel visibility.
Tab and Shift+Tab through its links and verify Escape returns focus to the trigger when the disclosure is open.
Follow a link and check that the menu closes without leaving stale focus or obstructing the destination.

What can be missed

ARIA menu/menuitem roles imply a different keyboard contract. Avoid those roles for ordinary site navigation unless you actually implement and need that model.

Markup and state contract

This concise markup illustrates names, relationships or state. Custom controls also need the keyboard interaction and state updates described in the checks and primary source; this snippet is not a complete component.

<nav aria-label="Main">
  <button type="button" aria-expanded="false" aria-controls="learn-links">Learn</button>
  <ul id="learn-links" hidden>
    <li><a href="/guides">Guides</a></li>
    <li><a href="/wcag">WCAG reference</a></li>
  </ul>
</nav>

Record your test

Use this worksheet to record what you actually checked. Notes stay on this device when you choose Save; they are not sent to us. Avoid personal or confidential information on shared devices.

Page and state testedBrowser, assistive technology and date

Check 1: Activate the disclosure and inspect its expanded state and panel visibility.
Check 2: Tab and Shift+Tab through its links and verify Escape returns focus to the trigger when the disclosure is open.
Check 3: Follow a link and check that the menu closes without leaving stale focus or obstructing the destination.

Evidence, exceptions and follow-up

These are your observations, not automated results or a conformance certificate. A complete evaluation needs appropriate scope, supported technologies, all applicable criteria and relevant page states.

Primary sources and scope

Primary implementation guidance

This is independent implementation guidance with original examples. The linked standard contains the full definitions, exceptions and conformance requirements. A criterion or checklist alone does not establish legal applicability or whole-site conformance.