# ARIA Required Children

Checks composite ARIA widgets contain the child roles they need.

- Repository: https://github.com/thedaviddias/Front-End-Checklist (74621 stars)
- Category: Engineering
- License: MIT
- Last updated: 2026-10-31
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add thedaviddias/Front-End-Checklist --skill aria-required-children -g -a claude-code -y`
Codex: `npx skills add thedaviddias/Front-End-Checklist --skill aria-required-children -g -a codex -y`
Cursor: `npx skills add thedaviddias/Front-End-Checklist --skill aria-required-children -g -a cursor -y`
Gemini CLI: `npx skills add thedaviddias/Front-End-Checklist --skill aria-required-children -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add thedaviddias/Front-End-Checklist`

## Description

Use when applies to custom ARIA widgets using composite roles: tablist, list, listbox, menu, menubar, tree, treegrid, grid, rowgroup, row, radiogroup. Use when reviewing components built with div/span elements that replace native HTML list, select, or nav elements.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Ensure ARIA roles contain required child roles

Screen readers like NVDA and VoiceOver navigate composite widgets (menus, tabs, trees) by moving between the required child roles. If a `tablist` contains `<div>` elements instead of `role='tab'`, the user hears no tabs at all. JAWS announces 'list of 5 items' only when `role='listitem'` children exist inside `role='list'`. Without correct nesting, the entire widget becomes opaque to keyboard-only and screen reader users.

## Quick Reference

- Container roles mandate specific owned child roles: `tablist` → `tab`, `list`/`listbox` → `listitem`/`option`, `menu`/`menubar` → `menuitem`, `tree` → `treeitem`, `grid`/`rowgroup` → `row`
- Missing required children break the accessibility tree so screen readers cannot enumerate items or announce counts
- Use `role='none'` or `role='presentation'` on purely structural wrapper elements inside the container to avoid invalid nesting
- Applies to WAI-ARIA 1.2 required owned elements for composite widget roles

## Check

Identify all elements with ARIA container roles (tablist, list, listbox, menu, menubar, tree, treegrid, grid, rowgroup, radiogroup). For each, verify it contains the required owned child roles per the WAI-ARIA spec: tablist must own tab elements; list must own listitem; listbox must own option; menu/menubar must own menuitem, menuitemcheckbox, or menuitemradio; tree must own treeitem; grid must own row (which owns gridcell); radiogroup must own radio. Flag any container roles missing required children.

## Fix

The rest: https://github.com/thedaviddias/Front-End-Checklist/blob/HEAD/skills/aria-required-children/SKILL.md