Accessible Tooltips & Popovers: WCAG 1.4.13, Hover, Focus & Dismissal Rules

Tooltips and contextual popovers display supplementary helper text when hovering over buttons, icons, or abbreviations. However, poorly implemented tooltips violate WCAG 1.4.13 (Content on Hover or Focus - Level AA), frustrating users who cannot keep the tooltip open or dismiss it without moving their mouse cursor.

The Three Rules of WCAG 1.4.13

Under WCAG 1.4.13, whenever additional content appears on mouse hover or keyboard focus:

1. Dismissible: The user must be able to dismiss the tooltip (e.g. by pressing the Escape key) without moving the pointer or shifting focus.
2. Hoverable: If pointer hover triggers the tooltip, the pointer can be moved over the tooltip content itself without the tooltip disappearing.
3. Persistent: The tooltip remains visible until hover/focus is removed or the user explicitly dismisses it.

Tooltips (Informational) vs Popovers (Interactive)

ARIA Semantic Wiring

<button 
  type="button" 
  class="help-trigger" 
  aria-describedby="cvv-tooltip-desc">
  CVV Security Code
  <svg aria-hidden="true">...</svg>
</button>

<div id="cvv-tooltip-desc" role="tooltip" class="tooltip-popup" hidden>
  The 3-digit security number printed on the back of your credit card.
</div>

Escape Key Dismissal & Hover Persistence Mechanics

Add a global `keydown` listener so that pressing the Escape key hides the active tooltip immediately, leaving keyboard focus intact on the trigger button.