ARIA Required Children

Why It Matters

• Widget structure depends on it. ARIA roles often work as part of a composed pattern. A role="menu" without role="menuitem" children is like a table of contents with no entries — the structure exists but contains nothing usable.
• Screen readers rely on the hierarchy. When a user enters a list, tree, or tabbed interface, their screen reader uses the parent-child role relationships to determine what items are available and how to navigate between them.
• Missing children break keyboard navigation. Many compound widgets use the parent-child role structure to set up arrow key navigation between items. Without the right child roles, keyboard behavior may not work at all.
• It signals incomplete implementation. If a container has the right role but its children do not, the component was likely not fully built out for accessibility — and other issues probably exist too.

How to Fix It

1. Look up the required children for the role. The WAI-ARIA specification lists exactly which child roles are required for each parent role. Check the spec for the role you are using and add any missing child roles.
2. Use native HTML elements first. A native <ul> with <li> elements already has the right parent-child semantics built in. Only use ARIA roles when building custom widgets that need behavior native elements cannot provide.
3. Do not skip intermediate levels. Some patterns require strict nesting. For example, a role="grid" needs role="row" children, and each row needs role="gridcell" children. Skipping a level breaks the structure.
4. Check for wrapper <div> elements breaking the chain. Adding a styling wrapper between a parent and its expected children can break the role relationship. Either give the wrapper the appropriate role or restructure the HTML.
5. Inspect the accessibility tree. Your browser's accessibility tree panel shows the actual role hierarchy as assistive tools see it. If a parent role's children do not have the expected roles, the tree will show the gap clearly.

Common Mistakes

• Inserting wrapper elements that break the relationship. Adding a <div class="wrapper"> between a role="list" and its role="listitem" children breaks the parent-child chain unless the wrapper also has role="presentation" or role="none".
• Using the wrong child role. Including role="option" inside a role="menu" when it should be role="menuitem". The specific role names matter — close is not good enough.
• Dynamically adding children without roles. JavaScript that appends new items to a widget-container often forgets to add the required ARIA role to the newly created elements.
• Overcomplicating simple content. Not every list, group, or set of items needs ARIA roles. If a native <ul>, <ol>, or <select> handles the job, use it — no ARIA required.