Bug 88: Tooltip Click-Only Activation (F1 + F42)

WCAG 2.1.1 (Keyboard) + 1.3.1 (Info & Relationships) | Tooltips only open on click, not hover/focus.

Failure F42: Tooltip Click-Only (No Hover/Focus)

Hover/tab over these for more info (they only work on click):

Issues:

  • Tooltips require click, not naturally triggered by focus
  • Hover doesn't show tooltip on touch devices
  • No aria-described-by on trigger linking to tooltip
  • Tooltip not announced to screen readers
  • No role="tooltip" on tooltip content
  • Keyboard users must click, can't just focus and read
Failure F1: Tooltip Content Not Associated
<!-- BUG: Tooltip exists but not properly linked --> <button onclick="showTooltip()">Info</button> <div id="tooltip" role="tooltip" style="display:none"> Help content </div> <!-- Missing: aria-describedby on button --> <!-- BETTER: --> <button aria-describedby="tooltip">Info</button> <div id="tooltip" role="tooltip">Help content</div>
Failure F42: No Keyboard Dismissal

If tooltip appears after click, how do keyboard users close it?

  • ESC key should close tooltip
  • Clicking outside should close it
  • Tab to next element should close it
  • No keyboard trap if tooltip is modal
HAL Fixes: HAL adds aria-describedby linking trigger to tooltip. HAL adds role="tooltip" to tooltip. HAL ensures tooltip shows on hover, focus, AND click. HAL adds ESC key handler to close. HAL manages focus if tooltip is interactive. HAL hides tooltip from screen readers if not essential (aria-hidden on decorative tips).