Tab

Tabbing into an item that has a tooltip associated with it (e.g., an icon) shows the tooltip.

Esc

Hides the tooltip.

Pointer

If the trigger is a button or link, or a focus-only element (like an info icon that shows a tooltip on hover), use the pointer cursor.

Default (Arrow)

If the trigger is an icon that is not clickable, use the default cursor.

Pointer

If the tooltip has a link, use the pointer cursor when interacting with the link.

Non-text content

1.1.1

A

Non‑text elements—such as icons used in tooltips and icons that trigger tooltips—must provide a text alternative that communicates the control’s purpose. All controls, especially icon‑only controls, need an accessible name (for example, via a title, aria‑label, or associated text) so screen readers can announce their function.

Info and relationships, Identify purpose

1.3.1, 1.3.6

A, AAA

Tooltips should be understandable by assistive technologies like screen readers. This means using the proper semantic HTML or ARIA role should be utilized.

Use of color

1.4.1

A

Color is never used as the sole way to convey meaning in tooltips. Tooltips use color to reinforce their meaning, but every tooltip also includes a clear text label that communicates purpose.

Text contrast minimums

1.4.3

AA

Large text has a contrast ratio of at least 3:1, and small text has a contrast ratio of at least 4.5:1. Incidental text such as disabled, hidden, or decorative text has no contrast requirement.

Resize text

1.4.4

AA

Tooltips should be built in such a way that they can be resized without assistive technology up to 200%.

Visual presentation

1.4.8

AAA

The width of text blocks is no more than 80 characters (40 for CJK languages), and text is never justified.

Non-text contrast

1.4.11

AA

The visual presentation of icons and various states have a contrast ratio of at least 3:1.

Text spacing

1.4.12

AA

Line height of text is at least 1.5x the font size in wrapped tooltips.

Requirement

Criterion

Level

Keyboard

2.1.1, 2.1.3

A, AAA

All functionality of the component is operable through a keyboard without specific timing for keystrokes.

Keyboard traps

A

Focus can be moved away from the component using only a keyboard.

Seizures and physical reactions

2.3.1, 2.3.2, 2.3.3

A, AAA, AAA

There is no flashing content or unnecessary motion or animation in this component.

Focus order

A

Navigation sequences receive focus in an order that preserves meaning and operability.

Focus visible

AA

Keyboard states use an indicator that is visible with at least 3:1 contrast.