Skip to content
Get packs

ARIA Role Checker

Reviews HTML for misspelled or invalid ARIA roles and suggests correct, native-first fixes.

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

What it does

Once installed, the agent checks rendered HTML and interactive components for ARIA role attributes that are misspelled, non-standard, or applied to the wrong elements. It reports exact elements and suggests replacing them with standard WAI-ARIA values, or preferably with native HTML controls like button or select that already carry the right meaning. It also looks at keyboard behaviour, focus flow, and accessible names where relevant.

Great for

  • Front-end developers reviewing components for accessibility before release
  • Designers or QA reviewers checking whether a custom widget is announced correctly by screen readers
  • Teams building a design system who want consistent, standards-based ARIA usage

Skip it if

  • Projects that need a full accessibility audit with real assistive technology testing, since the skill only reviews markup and cannot run a screen reader
  • Non-web projects or content without HTML, where ARIA roles do not apply

Try asking

  • “Review this login form markup for invalid or misspelled ARIA roles and suggest fixes”
  • “Check my custom dropdown component and tell me whether a native select would work instead”
  • “Audit the rendered HTML of this modal for role, focus and keyboard issues”
Step-by-step guide: how to use ARIA Role 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-roles.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

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

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip aria-roles.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 HTML (from browser devtools) rather than source templates, since the rule focuses on the final markup.
  • Ask the agent to prefer native elements first; the skill is designed to push back on unnecessary ARIA.
  • Verify fixes afterwards with browser accessibility tooling or a screen reader, because the skill reviews code only.

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.