OpenParable
Skip to content
← Back to skills

Accessible Tooltips

Design
accessible-tooltips

Accessible Tooltips is an Agent Skill for design published in the thedaviddias/Front-End-Checklist repository on GitHub: a SKILL.md instruction file an AI agent can load to do this task.

Use when reviewing templates, rendered HTML, or shared components related to Create accessible tooltips. Validate the final browser-facing markup, not just the source framework abstraction.

View on GitHub ↗
QUICK START

How to use this skill

Bring this guide into your coding agent with a prompt tailored to the tool you use.

  1. Open your project in Codex.
  2. Copy and paste the prompt below.
  3. Review files and risks before approving any action.
Prompt to paste
Inspect the Agent Skill at https://github.com/thedaviddias/Front-End-Checklist/blob/HEAD/skills/accessible-tooltips/SKILL.md and all supporting files. Report provenance, permissions, scripts, dependencies, and security risks. Propose an exact installation into .agents/skills/accessible-tooltips, but wait for my approval before writing files or running scripts.

Copying this prompt does not install or run the skill. Review third-party files before use.

Create accessible tooltips

Inaccessible tooltips leave keyboard and screen reader users without important contextual information, creating an unequal experience and potential confusion.

Quick Reference

  • Tooltips must be keyboard accessible (focusable trigger)
  • Use aria-describedby to associate tooltip with trigger
  • Allow hover and focus to show tooltip, Escape to dismiss
  • Ensure sufficient contrast and don't hide essential info in tooltips

Check

Verify tooltips are keyboard accessible, use appropriate ARIA roles (tooltip), and can be dismissed without moving focus.

Fix

Implement tooltips with role='tooltip', aria-describedby, keyboard triggering, and Escape key dismissal.

Explain

Explain the accessibility requirements for tooltips including keyboard access, ARIA attributes, and timing considerations.

Code Review

Review templates, server-rendered HTML, and shared components that output markup related to Create accessible tooltips. Flag exact elements, attributes, and routes where the rendered HTML violates the rule.

For full implementation details, code examples, and framework-specific guidance, see references/rule.md.

Rule page: https://frontendchecklist.io/en/rules/html/accessible-tooltips