Tooltip

How to test a tooltip

Gherkin Condensed WCAG

Given that I am on a page with a tooltip

1 Keyboard for mobile & desktop

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 mobile screenreader (Talkback, VoiceOver) 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 for all devices

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

A tooltip must meet these WCAG principles.

1Perceivable

Nothing to perceive because we don't use tooltips

2Operable

No need to operate because we don't use tooltips

3Understandable

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

4Robust

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?

Tooltips are indicative of poor UX design.

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 success criteria.

What should I do instead?

Put in the work to design and edit the UI language so that it’s self explanatory.

What if there’s no other way?

If you still have detailed information that needs to be displayed, consider putting it in a modal or an expander accordion component.