Skip to content
Get packs

ARIA Allowed Attributes Checker

Flags ARIA attributes that aren't valid for an element's role so screen readers get accurate info.

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

What it does

When installed, the agent reviews HTML and interactive components and checks that each ARIA attribute (accessibility labels and state markers) is one that the element's role actually supports. It points out unsupported attributes, suggests removing or correcting them, and explains why this matters for screen reader users. It also prompts the agent to consider native HTML semantics, keyboard behaviour, focus flow and accessible names where relevant.

Great for

  • Front-end developers reviewing markup for accessibility issues
  • Designers or QA reviewers checking component patterns before release
  • Teams building a design system who want consistent ARIA usage

Skip it if

  • Someone who needs a full accessibility audit with automated testing tools, since this is a guidance checklist and not a scanner (it does not run tests)
  • Non-technical users looking for a finished product; it only changes how the agent reviews code

Try asking

  • “Review this React button component and tell me if any ARIA attributes aren't allowed for its role.”
  • “Check this rendered HTML for role-incompatible aria-* attributes and suggest fixes.”
  • “Explain why aria-checked on a div with role=button might be a problem and how to fix it.”
  • “Audit our modal dialog markup for ARIA misuse and how to verify the fix with a screen reader.”
Step-by-step guide: how to use ARIA Allowed Attributes 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-allowed-attr.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

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

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip aria-allowed-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 roles may be set at runtime.
  • Ask the agent to name the specific element, role and attribute for each finding so you can verify it against the WAI-ARIA spec.
  • Confirm fixes with browser accessibility tools or a screen reader, as the skill itself only provides guidance.

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.