ARIA Required Parent Checker
Checks that ARIA child roles like listitem, tab, and menuitem sit inside their required parent roles.
- 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 to confirm that elements with ARIA roles (such as list items, tabs, or menu items) are placed inside the parent role they need, like a list or menu. If they are not, it flags the exact elements and suggests wrapping them in the correct container. It also checks related accessibility basics such as keyboard behavior, focus flow, and accessible names, so screen reader users can navigate correctly.
Great for
- Front-end developers reviewing markup for accessibility problems
- Teams building custom menus, tab sets, or list-like UI components
- Anyone auditing a design-system pattern before release
Skip it if
- Projects that do not use ARIA or where native HTML elements already provide the correct semantics; the skill's own advice is to check native semantics first, so it may add little value there
- Full accessibility audits, since the skill covers only this one rule and cannot replace testing with real assistive technology
Try asking
- “Review this menu component and tell me if the menuitem elements are inside a proper menu role.”
- “Check the tab markup in this HTML for ARIA parent-child problems.”
- “My list uses role="listitem" on divs without a list parent. How do I fix it?”
- “Audit this rendered page for orphaned ARIA roles and explain how a screen reader would announce them.”
Install in 3 steps
- 1
Download the skill
The ZIP contains the 2 original files, the MIT licence and an attribution note.
aria-required-parent.zip - 2
Add it to your agent
Claude Code (all projects)
mkdir -p ~/.claude/skills && unzip aria-required-parent.zip -d ~/.claude/skills/Claude Code / Agent SDK (this project only)
mkdir -p .claude/skills && unzip aria-required-parent.zip -d .claude/skills/Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.
- 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 code, not just a description, so the agent can check actual nesting.
- Ask for verification steps too, such as browser accessibility tree inspection or testing with a screen reader, since the agent cannot confirm announcements itself.
- Prefer native elements like ul/li, menu, or tablist where possible; the agent will often suggest this first.
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.