Tooltip - Web accessibility testing checklist

How to test a tooltip

Gherkin Condensed

Given that I am on a screen with a tooltip

1 Keyboard only

WHEN I use the arrow keys or tab key I SEE nothing, because we don't use tooltips

2 Desktop screenreader

WHEN I use a desktop screenreader (NVDA, JAWS, VoiceOver) AND I use the arrow keys or tab key
- I HEAR Nothing, because we don't use tooltips

3 Mobile screenreader

WHEN I use a screenreader AND I swipe
- I HEAR Nothing, because we don't use tooltips

1 Keyboard & screen reader actions

When I use	I see/hear
Any-key	Nothing, because we don't use tooltips

2 Mobile screenreader gestures

When I use	I hear
Any-gesture	Nothing, because we don't use tooltips

3 Screenreader output

Reads	I hear
Name	Nothing, because we don't use tooltips

A tooltip must meet WCAG principles:

1 Perceivable

Nothing to perceive because we don't use tooltips

2 Operable

No need to operate because we don't use tooltips

3 Understandable

The rest of the UI is understandable so we don't need tooltips to explain it

4 Robust

The design is super robust because it doesn't rely on tooltips

Code and design examples

We don’t use tooltips

<nope>
  <strong>We don't use tooltips.</strong>
</nope>

Why don’t we use tooltips?

If there is important content that is required to understand the UI, the tooltip is a sub optimal approach to helping the user.

The specific WAI-ARIA guidance isn’t clear and screen reader implementation will vary, so it’s impossible to create uniform success criteria.

Ask for design alternatives

Review How to design a tooltip with your UX/UI design team
If they insist on a tooltip, you are on your own

Web Tooltip