Skip to content
Get packs

ARIA Required Children Checker

Checks that custom ARIA widgets contain the child roles screen readers need.

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

What it does

When installed, the agent reviews custom interface widgets (tabs, menus, lists, trees, grids, radio groups) built from generic div or span elements and checks that each container has the correct child roles, such as tab inside tablist or option inside listbox. It suggests fixes like adding the right role attributes or preferring native HTML elements, so screen reader and keyboard users can navigate the widget. It is a focused accessibility rule rather than a general web audit.

Great for

  • Front-end developers building custom dropdowns, tabs, or tree views without native HTML controls
  • Reviewers checking pull requests for accessibility regressions in ARIA markup
  • Teams auditing legacy components that replaced native list or select elements with divs

Skip it if

  • Sites using native HTML elements like ul, select, or table, where this rule adds little (the skill itself recommends native elements first)
  • Full accessibility audits, since the skill covers only this one ARIA rule and not colour contrast, labels, or focus management
  • Anyone relying on it as proof of WCAG compliance; it gives guidance and cannot test real screen reader behaviour

Try asking

  • “Review this tablist component and tell me whether the tab items have the correct ARIA roles.”
  • “Check my custom dropdown built from divs for required listbox and option children.”
  • “Audit this tree view markup for treeitem roles and suggest fixes.”
  • “Does my grid wrapper contain row and gridcell roles as required?”
Step-by-step guide: how to use ARIA Required Children 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-children.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

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

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip aria-required-children.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 markup or the component code along with the request, since the review depends on the actual elements and roles.
  • Verify the agent's findings with browser accessibility tools or an actual screen reader, because the skill itself does not test behaviour.
  • Ask for native HTML alternatives first where they fit, as the skill recommends them before ARIA roles.

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.