Skip to content
Get packs

ARIA Attribute Value Checker

Reviews HTML so ARIA attributes use valid values that assistive technology can read correctly.

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 a specific accessibility rule: ARIA attributes (extra labels that describe states to screen readers, such as aria-expanded) must hold valid values like true or false, and any IDs they reference must exist. When you ask the agent to review HTML or interactive components, it checks these values, explains why wrong values confuse assistive technology, and suggests corrections. It also points you to a reference page for fuller examples.

Great for

  • Front-end developers checking markup for accessibility problems before release
  • Designers or QA reviewers who want a quick audit of ARIA usage in a component
  • Teams learning why values like yes/no instead of true/false break screen readers

Skip it if

  • Full accessibility audits: it covers only one rule about ARIA attribute values, so other issues will be missed
  • Projects needing automated testing tools: the skill is guidance for the agent, not a validator that runs against your build

Try asking

  • “Review this React modal component for invalid ARIA attribute values and fix them.”
  • “Check this HTML snippet to confirm aria-labelledby points to IDs that actually exist.”
  • “Why does aria-expanded="yes" cause a problem? Show me the corrected markup.”
Step-by-step guide: how to use ARIA Attribute Value 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-valid-attr-value.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

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

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip aria-valid-attr-value.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 or the component code, not just a description, so the agent can check actual values.
  • Ask the agent to verify fixes with a browser accessibility tool or a screen reader, since the skill recommends this.
  • Pair it with other accessibility skills from the same checklist for broader coverage.

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.