Skip to content

Accessible Tooltip Names Checker

Reviews tooltips and their triggers so screen reader users can access tooltip information.

Stars
74,632
Licence
MIT
Files
2 files

What it does

When installed, the agent reviews web pages and components for tooltips that screen reader users might miss. It checks that each tooltip has an accessible name or is linked to its trigger with aria-describedby, and it suggests fixes and ways to verify them. The skill is a set of written guidelines, not a tool that runs code or changes files on its own.

Great for

  • Front-end developers reviewing HTML or component markup for accessibility
  • Designers or QA staff checking that tooltip information is available to assistive technology

Skip it if

  • Teams needing automated accessibility scans of a whole site, since this only gives guidance and reviews what the agent is shown (a dedicated audit tool is more thorough)
  • Non-technical users looking for a simple tooltip writing tool, since the skill is aimed at accessibility markup review

Try asking

  • “Review this React tooltip component and tell me whether screen readers will announce its text.”
  • “Check this HTML snippet for tooltips that are not linked to their trigger elements.”
  • “Suggest aria-describedby fixes for the tooltips on this settings page.”
Step-by-step guide: how to use Accessible Tooltip Names 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.

    aria-tooltip-name.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip aria-tooltip-name.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip aria-tooltip-name.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 markup or the component code, not only a screenshot, so the agent can inspect roles and attributes.
  • Ask the agent to explain how to verify the fix with browser accessibility tools or a screen reader, since it cannot test assistive technology itself.
  • Check the referenced rule page for framework-specific examples, as the skill points there for full details.

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.