Skip to content
Get packs

Accessible Tooltips Checker

Reviews HTML and components so tooltips work with keyboard and screen readers

Source Download skill
Repository
thedaviddias/Front-End-Checklist
Stars
74,632
Licence
MIT
Files
2 files

What it does

This skill teaches an AI agent a set of accessibility rules for tooltips, the small hint boxes that appear when you hover over or focus on an element. When asked, the agent reviews templates, rendered HTML, or shared components and flags problems such as triggers that cannot be reached by keyboard, missing aria-describedby links, missing role='tooltip', or tooltips that cannot be dismissed with Escape. It can also suggest fixes and explain the requirements.

Great for

  • Front-end developers auditing a website or component library for accessibility
  • Designers or QA staff who want a checklist-style review of tooltip markup
  • Teams preparing for an accessibility review (for example, WCAG-related work)

Skip it if

  • Projects that do not use tooltips, since the rules will have nothing to check
  • Complete accessibility compliance: the skill covers only tooltips, and a human expert or full audit is still needed for legal conformance
  • Framework-specific implementation details beyond what is in the reference file, which the agent may not fully cover

Try asking

  • “Review this React component for accessible tooltips and list the exact elements that break the rule.”
  • “Check our rendered HTML output for tooltips that are missing aria-describedby or role='tooltip'.”
  • “Explain what keyboard and screen reader users need from tooltips in our design system.”
  • “Suggest a fix so our tooltip can be dismissed with Escape without moving focus.”
Step-by-step guide: how to use Accessible Tooltips CheckerInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the MIT licence and an attribution note.

    accessible-tooltips.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip accessible-tooltips.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip accessible-tooltips.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Paste the rendered HTML from the browser, not just the source framework code, because the skill asks for the final markup to be checked.
  • Name the specific files or components to review so the agent can flag exact elements and attributes.
  • Treat the output as a starting checklist and confirm fixes with a real screen reader and keyboard test.

What's inside

  • references/rule.md
  • SKILL.md

Redistributed unmodified from thedaviddias/Front-End-Checklist under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.