Nav button popover - Web accessibility testing checklist

How to test a nav button popover

Gherkin Condensed

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

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)

A nav button popover must meet WCAG principles:

1 Perceivable

Color is not used as the only means of conveying state (expanded/collapsed) - 1.4.1 A
Text can resize up to 200% with no loss of information - 1.4.4 AA
Text has a 4.5:1 minimum contrast ratio 1.4.3 AA
The purpose can be programmatically determined - 1.3.5 AA

2 Operable

Is keyboard operable - 2.1.1 A
The click/tap target area includes the label and is no smaller than 24x24px - 2.5.8 AA
The click/tap target area includes the label and is no smaller than 44x44px - 2.5.5 AAA
The focus indication is visible (in some way) 2.4.7 AA
The focus indication has a 3:1 minimum contrast ratio against default and adjacent elements - 2.4.13 AAA
The focus indication has a minimum area equal to the width of the element and 2px in height - 2.4.13 AAA

4 Robust

Conveys the correct name, role, state - 4.1.2 A
Meets criteria across platforms, devices and viewports 4.0.0 AA

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: This simple example uses the popover API which has the earliest support in Chrome (older versions of Safari and Firefox may not yet support this); Positioning may not work depending on what experimental-web-platform-features are activated in Chrome; This will require additional JS and CSS to be production ready code

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

Web Nav button popover