Skip to content
Get packs

Required ARIA Attributes Checker

Reviews HTML for ARIA roles missing their required attributes, like aria-valuenow on sliders.

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 rendered HTML and interactive components for ARIA roles that are missing attributes the WAI-ARIA specification requires. ARIA attributes are labels that tell screen readers what an element is and what state it is in. For example, a slider needs a current value so a screen reader user can hear it. The agent checks native HTML semantics first, then flags missing attributes and suggests fixes, and can also look at keyboard behaviour, focus flow and accessible names where relevant.

Great for

  • Front-end developers auditing components for accessibility before release
  • Designers or QA reviewers checking design-system patterns against ARIA requirements
  • Teams working through the Front-End Checklist accessibility items

Skip it if

  • Full accessibility audits: it covers one rule and does not replace testing with real assistive technology or a professional audit
  • Sites that do not use custom ARIA roles, where the rule rarely applies and native HTML is usually the better fix

Try asking

  • “Review this slider component and tell me if any required ARIA attributes are missing.”
  • “Check my rendered HTML for roles that need aria-valuenow, aria-checked or similar attributes.”
  • “Explain to my team why our custom dropdown's role is missing required state attributes and how to fix it.”
Step-by-step guide: how to use Required ARIA 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-required-attr.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

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

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip aria-required-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 the component's markup, not only the source template, so the agent sees the final roles and attributes.
  • Ask the agent to suggest native HTML alternatives first, since a native element often removes the need for ARIA attributes.
  • Confirm fixes with a browser accessibility inspector or a screen reader, because the agent's review is based on the specification rather than on testing real users.

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.