Skip to content
Get packs

ARIA Attribute Validator

Reviews HTML for misspelled or invalid ARIA attributes that assistive technology would ignore.

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

What it does

When installed, this skill tells an AI agent to review rendered HTML and interactive components for ARIA attributes (the accessibility labels browsers pass to screen readers) that are misspelled, non-existent, or not defined by the WAI-ARIA standard. The agent is guided to check native HTML semantics first, then look at keyboard behaviour, focus flow, and accessible names, and to explain how to verify fixes with browser accessibility tools. It is a checklist-style review guide, not an automated scanner.

Great for

  • Front-end developers reviewing components for accessibility before release
  • Designers or QA staff who want a plain-language accessibility check of markup
  • Teams building a design system who want consistent, valid ARIA usage

Skip it if

  • Full accessibility audits that require real assistive technology testing; the skill only guides review from the markup and cannot run screen readers
  • Projects needing automated, repeatable linting in CI; a dedicated linter such as axe or eslint-plugin-jsx-a11y is more reliable

Try asking

  • “Review this rendered HTML for invalid or misspelled ARIA attributes.”
  • “Check my modal component for ARIA problems and tell me how to verify the fix in browser dev tools.”
  • “Explain why aria-labell on this button would be ignored by screen readers and fix it.”
Step-by-step guide: how to use ARIA Attribute ValidatorInstall, 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-valid-attr.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip aria-valid-attr.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip aria-valid-attr.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 or component code rather than source templates, since the skill asks for rendered markup.
  • Ask the agent to name exact elements and attributes so fixes are easy to apply.
  • Pair the review with a browser accessibility tree inspector to confirm the changes.

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.