Guide · Agent skill
How to use the aria-tooltip-name agent skill for tooltip accessibility
Updated · written with AI from the project's own documentation and checked against our catalogue data
The aria-tooltip-name skill is a set of written accessibility guidelines that an AI agent follows when it reviews web pages or components for tooltips that screen reader users might miss. It is meant for front-end developers, designers and QA staff who want a second check on tooltip markup. After this guide you will know what the skill does, how to install it, how to ask for it with plain requests, and where its limits are.
Accessible Tooltip Names Checkerthedaviddias/Front-End-Checklist · MIT Download the skill Quick start
- 1Download the ZIP. Get the aria-tooltip-name skill ZIP from the Front-End Checklist page.
- 2Unzip the skill. Extract it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder.
- 3Or upload it in the Claude apps. Go to Settings → Capabilities → Skills and upload the skill there.
- 4Share the markup. Paste the HTML or component code you want reviewed into your request.
- 5Ask for a tooltip review. Describe the task in plain words, mentioning tooltips and accessible names.
- 6Apply and verify the fix. Make the suggested change, then check it with browser accessibility tooling or assistive technology.
What is an agent skill and what does this one do?
An agent skill is a folder of instructions that an AI agent can load when a task matches the skill's description. This one is named aria-tooltip-name and its description says it applies when you review rendered HTML, interactive components, or design-system patterns related to providing accessible names for tooltips.
When installed, the agent checks that each tooltip has an accessible name or is linked to its trigger with aria-describedby. It then suggests fixes and ways to verify them. The skill is a set of written guidelines. It does not run code or change files on its own.
- Checks that elements with role="tooltip" have an accessible name or are referenced by a trigger via aria-describedby
- Checks that tooltip content is actually reachable by assistive technology
- Suggests fixes and explains how to link tooltips to their triggers
- Flags exact elements, roles, labels, focus behaviour or keyboard interactions that break the rule
How do you install the aria-tooltip-name skill?
Download the ZIP for the skill from the Front-End Checklist page. Unzip it into your personal skills folder at ~/.claude/skills/, or into a project's .claude/skills/ folder if you want the skill only for that project.
You can also upload the skill in the Claude apps under Settings → Capabilities → Skills.
- Personal install: unzip into ~/.claude/skills/
- Project install: unzip into the project's .claude/skills/ folder
- Claude apps: Settings → Capabilities → Skills, then upload the skill
What files come with the skill?
The skill contains two files. SKILL.md holds the main instructions and the quick reference. references/rule.md holds fuller implementation details and a code example showing a button linked to a tooltip with aria-describedby, and a tooltip with its own aria-label.
Keep both files together when you unzip, so the agent can read the reference page when it needs more detail.
- SKILL.md: main instructions
- references/rule.md: detailed rule page with code examples
How do you trigger the skill with a natural request?
You do not need a special command. Describe the task in plain language and mention tooltips, accessibility or the markup you want reviewed. The agent matches the request to the skill description.
Give the agent the actual HTML or component code, or the rendered page output, because the skill reviews only what the agent is shown.
- "Review this button and its tooltip for accessible names."
- "Check whether the tooltips on this form are announced to screen reader users."
- "Does this design-system tooltip use aria-describedby correctly?"
What does a review look like in practice?
A typical review starts with the trigger and the tooltip markup. The agent checks whether the tooltip has an accessible name, or whether the trigger points to it with aria-describedby. Then it suggests a fix and a way to verify it.
The source suggests verifying fixes with browser accessibility tooling or assistive technology. The skill itself does not run those tools for you.
- Correct pattern: a button with aria-describedby pointing to a div with role="tooltip" and matching id
- Also acceptable: a role="tooltip" element with its own aria-label
<button aria-describedby="tooltip-save">
Save
</button>
<div id="tooltip-save" role="tooltip">
Saves your current changes to the cloud
</div>What should you not expect from this skill?
The skill gives guidance and reviews what it is shown. It is not an automated scan of a whole site. If you need a full, repeatable audit of every page, a dedicated audit tool is more thorough.
It is also not a tooltip writing tool for non-technical users. It is aimed at accessibility markup review.
- Not a whole-site automated accessibility scanner
- Not a tool that edits your files or runs code
- Not a writing aid for tooltip copy
What people use it for
- Reviewing a button whose tooltip explains a keyboard shortcut
- Checking a form where helper tooltips must be announced to screen reader users
- Reviewing a design-system tooltip component for correct aria-describedby linking
- Giving QA staff a checklist of tooltip elements to verify with assistive technology
Frequently asked questions
How do I install the aria-tooltip-name skill?
Download the ZIP from the Front-End Checklist 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 → Capabilities → Skills.
Does this skill require anything else to run?
The source lists no requirements. It does not run scripts and does not use the network. It works by giving the agent written guidelines to follow.
Is the aria-tooltip-name skill free?
The skill is published under the MIT licence. The source does not list pricing, so check the source page for any details beyond the licence.
Can the skill scan my whole website for tooltip problems?
No. The skill reviews only the markup or rendered output you give the agent. For a full automated scan of a site, the source recommends a dedicated audit tool.
What is the difference between aria-describedby and aria-label on a tooltip?
The skill's reference shows two accepted patterns: a trigger linked to the tooltip with aria-describedby, or a role="tooltip" element with its own aria-label. Both make the tooltip information available to assistive technology.
How do I check that a tooltip fix works?
The skill suggests verifying fixes with browser accessibility tooling or assistive technology such as a screen reader. Run the check yourself, because the skill does not run tools.
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 person who wants an agent to review tooltip markup for accessible names and aria-describedby links. Pick a dedicated audit tool if you need automated scanning of a whole site, or a different resource if you need help writing tooltip copy.
Download the skill