Nav popover button - Web accessibility testing checklist - [Updated 2025] Atomic Accessibility

How to test a nav popover button

Gherkin Checklist

Given that I am on a screen with a nav popover button

1 Keyboard only

WHEN I use the tab key to move focus to a menu button I SEE focus is strongly visually indicated
Then when I use the spacebar and/or enter key to activate a menu button I SEE the menu expands/collapses
Then when I use the tab key to move focus to a menu option I SEE each option is focused
Or when I use the tab key to move focus to the end of the options I SEE focus leaves the menu, I am not trapped in the menu

2 Desktop screenreader

WHEN I use a desktop screenreader (NVDA, JAWS, VoiceOver) AND I use the tab key to move focus to a menu button
- I HEAR its purpose is clear
- I HEAR the menu button identifies its role as button, each option identifies its role as link
- I HEAR menu button expresses its state (expanded/collapsed)
Then when I use the spacebar and/or enter key to activate a menu button I HEAR the menu expands/collapses
Then when I use the tab key to move focus to a menu option I HEAR each option is focused
Or when I use the tab key to move focus to the end of the options I HEAR focus leaves the menu, I am not trapped in the menu

3 Mobile screenreader

WHEN I use a screenreader AND I swipe to focus on a menu button
- I HEAR its purpose is clear
- I HEAR the menu button identifies its role as button, each option identifies its role as link
- I HEAR menu button expresses its state (expanded/collapsed)
Then when I doubletap with the button in focus I HEAR the menu expands/collapses

1 Keyboard & screen reader actions

When I use	I see/hear
Tab	Focus visibly moves to the menu button and options
Spacebar or enter	Toggles the menu
Escape	Closes the menu

2 Mobile screenreader gestures

When I use	I hear
Swipe	Focus moves to the menu button, expresses its state (expanded/collapsed), focus moves to options
Doubletap	Toggles the menu

3 Screenreader output

Reads	I hear
Name	Its purpose is clear
Role	The menu button identifies its role as button, each option identifies its role as link
State	Menu button expresses its state (expanded/collapsed)

Usage

Menu popover buttons come in several forms: from a simple dropdown of links to more expansive mega-nav menus.

Don’t overcomplicate this

Do not add role="menu" or role="option" to the markup.
- These roles imply additional keyboard functionality will be present
- Unless you’re building actual Web based software like Gmail, this is unnecessary

Current support:: Not baseline. This simple example uses the popover API with anchor positioning which has the most support in Chrome (Safari, Firefox etc. may not yet support this and will require a polyfill).

<nav class="popover">
  <ul>
    <li>
      <button class="popover-toggle menu"  popovertarget="nav-popover">
        Menu
      </button>
      <ul id="nav-popover" class="popover-surface" popover>
        <li>
          <a href="/accessible-design/">Design</a>
        </li>
        <li>
          <a href="/accessible-web/">Web</a>
        </li>
        <li>
          <a href="/accessible-ios/">iOS</a>
        </li>
        <li>
          <a href="/accessible-android/">Android</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

Web Nav popover button