Popover - Web accessibility testing checklist - [Updated 2025] Atomic Accessibility

How to test a popover

Gherkin Checklist

Given that I am on a screen with a popover

1 Keyboard only

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

2 Desktop screenreader

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

3 Mobile screenreader

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

1 Keyboard & screen reader actions

When I use	I see/hear
Tab	Focus visibly moves to the launch button and controls inside the popover
Spacebar or enter	Toggles the popover
Escape	Closes the popover

2 Mobile screenreader gestures

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

3 Screenreader output

Reads	I hear
Name	Its purpose is clear
Role	The popover button identifies its role as button
State	Popover button expresses its state (expanded/collapsed)

Usage

This is not a tooltip.
Popovers allow a small piece of content to pop over existing content.
They are a lightweight component, and shouldn’t contain heavy content or important alerts like modal dialogs do.

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).

Code examples

<button class="popover-toggle menu"  popovertarget="account-popover">
  More
</button>
<div id="account-popover" class="popover-surface" popover>
  <p>
    Popovers are not <a href="/accessible-web/tooltip/">tooltips</a>. 
    They are used to display additional content or simple actions related to a specific element.
  </p>
</div>

<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 Popover

How to test a popover

1 Keyboard only

2 Desktop screenreader

3 Mobile screenreader

1 Keyboard & screen reader actions

2 Mobile screenreader gestures

3 Screenreader output

Usage

Code examples

Content popover

Navigation popover

Further reading

Related popover entries