Last week, we covered the essential ARIA attributes for accessible tooltips. Those attributes are essential, but they’re only part of the story. The other part is keyboard interaction.

Many tooltips only appear on mouse hover. That means keyboard-only users (people navigating with the Tab or Tab+Shift keys instead of a mouse) never see that helpful information. The tooltip might have the correct ARIA attributes, but if it doesn’t appear when someone focuses on the trigger element, it’s useless.

So, let’s look at the three keyboard requirements every tooltip needs.

Requirement #1: Show on Focus, Not Just Hover

Tooltips must appear when the trigger element receives keyboard focus, not only on mouse hover.

When a keyboard user navigates to that “?” icon or button, the tooltip should appear automatically. This typically means adding CSS :focus styles alongside your :hover styles, or using JavaScript to handle both focus and hover events.

Without this, keyboard users are left guessing what icons mean or what additional context they’re missing.

Requirement #2: Dismissible with Escape

Users must be able to dismiss tooltips by pressing the Escape key. This is a WCAG Level AA requirement under Success Criterion 1.4.13 (Content on Hover or Focus).

This matters because tooltips can cover other content on the page. Users need a way to remove them without moving their focus to a different element. This typically requires a JavaScript event listener that detects the Escape key and hides the tooltip.

Requirement #3: Focus Stays on the Trigger

When a tooltip appears, keyboard focus should remain on the trigger element. The tooltip itself should not receive focus. That’s part of what distinguishes a tooltip from a dialog or modal.

If your tooltip is implemented correctly, this happens naturally. But it’s worth testing to make sure focus isn’t jumping unexpectedly.

Get these three keyboard interactions right, and your tooltips will work better for everyone, not just mouse users.

Don’t Miss Out

Get practical accessibility tips in your inbox every week.

Matt Litzinger headshot

Matt Litzinger

Matt is a web developer who builds tools that help organizations better engage with customers and improve website accessibility.