Guide · Agent skill
How to use the Accessible Tooltips Checker agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The accessible-tooltips skill is a set of accessibility rules for tooltips, the small hint boxes that appear on hover or focus. Once installed, you can ask an AI agent to review templates, rendered HTML or shared components and flag tooltip problems. This guide explains what the skill does, how to install it, how to trigger it and what to watch for.
Accessible Tooltips Checkerthedaviddias/Front-End-Checklist · MIT Download the skill Quick start
- 1Download the ZIP. Download the accessible-tooltips ZIP from this page.
- 2Unzip into a skills folder. Unzip it into ~/.claude/skills/ for personal use, or into your project's .claude/skills/ folder.
- 3Or upload it in the Claude apps. Open Settings, go to Capabilities, and upload the skill under Skills.
- 4Give the agent rendered HTML. Share the component or template along with its rendered output so the agent checks what browsers receive.
- 5Ask for a tooltip review. Make a plain-language request naming the file or component to check.
- 6Check the findings in a browser. Verify each flagged issue by testing keyboard focus, Escape and screen reader output yourself.
What the accessible-tooltips skill makes the agent do
An agent skill is a folder of instructions that an AI agent loads when a task matches the skill's description. This one covers tooltips. When you ask, the agent reviews templates, rendered HTML or shared components and checks whether tooltips can be reached and read by keyboard and screen reader users.
The skill's checks focus on triggers that cannot be reached by keyboard, missing aria-describedby links, missing role='tooltip', and tooltips that cannot be dismissed with Escape. It can also suggest fixes and explain the requirements behind them.
- Confirm tooltip triggers are keyboard accessible (focusable).
- Confirm the trigger is linked to the tooltip with aria-describedby.
- Confirm the tooltip uses role='tooltip'.
- Confirm hover and focus show the tooltip and Escape dismisses it.
- Check that essential information is not hidden only in a tooltip, and that contrast is sufficient.
Install the skill from the ZIP download
Download the ZIP for this skill from this page. Then install it in one of two places, depending on how you work.
For a personal setup, unzip the file into ~/.claude/skills/. For a single project, unzip it into the project's .claude/skills/ folder. The skill's files, SKILL.md and references/rule.md, should end up inside a folder named accessible-tooltips.
If you use the Claude apps instead, open Settings, go to Capabilities, and upload the skill under Skills.
Trigger the skill with natural requests
You do not need a special command. The skill is meant to be picked up when your request matches its description, which covers reviewing templates, rendered HTML or shared components for tooltip accessibility. Ask in plain language and name the file or component you want checked.
- Review the tooltip markup in src/components/InfoIcon.html for accessibility problems.
- Check whether our rendered checkout page tooltips can be dismissed with Escape.
- Audit the shared Tooltip component for missing aria-describedby links and role='tooltip'.
- Suggest a fix for a trigger that only shows its tooltip on hover.
Example: what a correct tooltip looks like
The reference file gives a pattern the agent can compare your markup against. The trigger is a button, it points to the tooltip with aria-describedby, and the tooltip element carries role='tooltip' and a matching id.
- Show the tooltip on focus as well as hover, so keyboard users get it.
- Dismiss it with the Escape key.
<div class="tooltip-container">
<button
type="button"
aria-describedby="tooltip-1"
class="tooltip-trigger"
>
Settings
</button>
<div
id="tooltip-1"
role="tooltip"
class="tooltip"
>
Configure your preferences
</div>
</div>What the skill needs and how it runs
The skill lists no requirements. It does not run scripts and does not use the network, so it works by reading the files you give it and the instructions in its folder.
Because it only reads and reasons about markup, its output is a review. Treat it as a checklist to act on, then confirm fixes in a browser and with assistive technology.
- Requires: nothing listed.
- Runs scripts: no.
- Uses network: no.
- Licence: MIT.
Tips for getting useful results
Give the agent the rendered HTML when you can. The skill's own guidance says to validate the final browser-facing markup, not just the source framework abstraction, so a template alone may hide what users actually receive.
Ask for exact elements and attributes. The skill is written to flag specific elements, attributes and routes where the output breaks a rule, so a precise request gets a precise answer.
- Include the component file and a sample of its rendered output together.
- Ask for a fix as well as a finding if you want code changes.
- Keep the scope to tooltips; the skill does not cover other accessibility issues.
What people use it for
- Auditing a shared Tooltip component in a component library for missing aria-describedby links.
- Reviewing rendered checkout or form pages for tooltips that cannot be dismissed with Escape.
- Preparing a checklist-style tooltip review before an accessibility review or WCAG-related work.
- Asking for a suggested fix for a hover-only tooltip that also needs to work on focus.
Frequently asked questions
How do I install the accessible tooltips agent skill?
Download the ZIP from this page and unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder. You can also upload it in the Claude apps under Settings, then Capabilities, then Skills.
What does the accessible-tooltips skill check?
It checks that tooltip triggers are keyboard accessible, linked with aria-describedby, use role='tooltip', and can be dismissed with Escape. It also looks for essential information hidden only in tooltips and for sufficient contrast.
Does the skill need any requirements or run scripts?
The skill lists no requirements. It does not run scripts and does not use the network. It works by reading the files you provide and the instructions in its folder.
Is the accessible-tooltips skill free to use?
The skill is published under the MIT licence. This page does not list a price, so check the licence text for the terms that apply to your use.
Does passing this skill's review mean my site is fully accessible?
No. The skill covers only tooltips. It does not provide complete accessibility compliance, and a human expert or full audit is still needed for legal conformance.
What should I use instead if my project has no tooltips?
The skill has nothing to check if your project does not use tooltips. Look for an accessibility skill or manual audit method that matches the components you do use.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this skill if you are a front-end developer, designer or QA tester who wants an agent to run a checklist-style review of tooltip markup, especially before an accessibility review. Skip it if your project has no tooltips, or if you need full accessibility compliance, since it covers tooltips only and does not replace a human expert or full audit.
Download the skill