Skip to content
Get packs

Duplicate ID ARIA Checker

Reviews HTML for duplicate IDs that break ARIA label and description links.

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 to review web page markup for a specific accessibility bug: two elements sharing the same id, so that an ARIA attribute such as aria-labelledby points to the wrong element. When that happens, screen readers may announce misleading labels or descriptions. Once installed, the agent checks rendered HTML and components for this problem, suggests unique IDs, and updates the references to match, and can explain why it matters.

Great for

  • Front-end developers reviewing components before release
  • Accessibility reviewers auditing rendered pages
  • Design-system teams checking shared interactive patterns

Skip it if

  • Non-web projects or static documents with no HTML (the rule does not apply)
  • Replacing a full accessibility audit with real assistive technology testing, since the skill only reads markup and gives general guidance

Try asking

  • “Review this rendered HTML for duplicate IDs referenced by aria-labelledby”
  • “Check my form component for ARIA references that point to the wrong input”
  • “Explain why duplicate IDs cause screen reader problems and how to fix them”
Step-by-step guide: how to use Duplicate ID ARIA 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.

    duplicate-id-aria.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip duplicate-id-aria.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip duplicate-id-aria.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 DOM (from browser dev tools) rather than source templates, since duplicates often come from repeated components.
  • Ask the agent to list every ARIA attribute that references an ID and confirm each target is unique.
  • Verify fixes with a browser accessibility inspector or a screen reader, as the skill itself only reviews text.

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.