Guide · Agent skill
How to use the ARIA Required Children Checker agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The ARIA Required Children Checker is an agent skill that reviews custom interface widgets built from div or span elements and checks that each container role has the child roles it needs. It is useful for front-end developers, code reviewers and teams auditing legacy components. After this guide you will know what the skill does, how to install it, how to ask for it in plain language, and where its limits are.
ARIA Required Children Checkerthedaviddias/Front-End-Checklist · MIT Download the skill Quick start
- 1Download the skill ZIP. Get the ZIP for skills/aria-required-children from the page and keep it somewhere you can find it.
- 2Unzip into a skills folder. Place the aria-required-children folder in ~/.claude/skills/ for personal use, or in a project's .claude/skills/ folder.
- 3Or upload in the Claude apps. In the Claude apps, open Settings, go to Capabilities, then Skills, and upload the skill.
- 4Ask for a review in plain language. Describe the widget and mention its roles, such as tabs, listbox or tree view.
- 5Apply the suggested fixes. Add the missing child roles, mark wrapper divs with role none or presentation, or switch to native elements where that fits.
- 6Verify with accessibility tools. Check the result in browser accessibility tooling and, if possible, with a screen reader.
What is an agent skill and what does this one do?
An agent skill is a folder of instructions (a SKILL.md file plus reference files) that an AI agent loads when your request matches the skill's description. This one covers a single accessibility rule: container ARIA roles must contain their required child roles.
When active, the agent identifies elements with container roles such as tablist, list, listbox, menu, menubar, tree, treegrid, grid, rowgroup and radiogroup. For each one it checks that the required children are present, for example tab inside tablist or option inside listbox, and suggests fixes.
- Adds the correct role to child elements, such as role='tab' on each tab button inside role='tablist'.
- Marks purely structural wrapper divs with role='none' or role='presentation' when they sit between a container and its children.
- Recommends native HTML where possible, such as ul and li instead of role='list' and role='listitem', or select and option instead of listbox and option.
Install the skill from the ZIP download
Download the ZIP for skills/aria-required-children from the page where you found this guide. Unzip it so that the skill folder sits in one of the locations below. The skill's files are SKILL.md and references/rule.md.
For a personal install across all your projects, place the folder in ~/.claude/skills/. For a single project, place it in that project's .claude/skills/ folder so it applies only there.
If you use the Claude apps instead, open Settings, go to Capabilities, then Skills, and upload the skill there.
- Personal: ~/.claude/skills/aria-required-children/
- Project: .claude/skills/aria-required-children/ inside your project
How to trigger the skill with natural requests
You do not need a special command. The agent loads the skill when your request matches its description, which covers custom ARIA widgets using composite roles and reviews of components built from div or span elements that replace native list, select or nav elements.
Name the widget or the concern in your request. Mentioning the component type (tabs, dropdown, tree view) or the roles involved makes the match more reliable.
- Review this tab component for missing ARIA child roles.
- Check that my custom listbox has option children.
- This PR replaces ul with divs. Does the ARIA structure still hold up?
- Is my tree view markup valid for screen readers?
What a review looks like
The skill follows a fixed sequence: it identifies container roles, verifies each required owned child role against the WAI-ARIA 1.2 spec, flags any container missing required children, and then proposes fixes. The reference file includes a corrected example where a tablist owns two tab buttons, each with aria-selected and aria-controls set.
The skill explains why this matters. Screen readers such as NVDA and VoiceOver move between the required child roles of a widget, so a tablist built from plain divs gives the user no tabs to navigate.
- Required owned children are checked, not general markup quality.
- The skill distinguishes this rule from aria-required-parent, which checks the inverse direction.
Check the result with real tools
The skill gives guidance and cannot test real screen reader behaviour. After applying a fix, verify it with browser accessibility tooling and, where possible, with an actual assistive technology such as NVDA, JAWS or VoiceOver.
Keep in mind that the skill covers only this one ARIA rule. Colour contrast, form labels and focus management need separate checks.
What people use it for
- Reviewing a custom dropdown built from divs to confirm its options are exposed as option children of a listbox.
- Checking a pull request that changes tab markup for missing role='tab' children.
- Auditing a legacy tree view or data grid that replaced native elements with div and span wrappers.
- Deciding whether a div-based list should be rewritten as ul and li.
Frequently asked questions
How do I install the ARIA Required Children skill?
Download the ZIP for skills/aria-required-children and unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder. In the Claude apps you can instead upload it under Settings, then Capabilities, then Skills.
Does this skill require anything else to run?
The listing states no requirements. It runs no scripts and uses no network access, so it works by giving the agent instructions to follow.
Is the ARIA Required Children Checker free?
The skill is released under the MIT licence. The source does not list pricing, so check the licence terms in the repository for details.
Does this skill make my site WCAG compliant?
No. It checks one ARIA rule about required child roles. It is not a full accessibility audit and does not prove WCAG compliance.
Should I use this skill or just use native HTML elements?
The skill itself recommends native elements first, such as ul and li or select and option. Use the skill when you must build a custom widget from divs or spans, or when reviewing existing ones.
Why does the agent not trigger for my request?
The skill loads when your request matches its description. Name the component and its roles, for example tabs with tablist and tab, and confirm the folder is in the correct skills directory.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
This skill suits front-end developers building or reviewing custom tabs, menus, lists, trees and grids, and teams checking pull requests for ARIA markup regressions. It is not suited to sites that already use native HTML controls, to full accessibility audits, or to anyone who needs proof of WCAG compliance.
Download the skill