ARIA roles must be placed inside their required parent

How to place ARIA roles in their required parent?

Some ARIA roles are only valid inside a specific parent role. Place the element inside the correct parent, or add the required parent role.

Common roles and their required parents:

<div role="listitem">Item 1</div>
<div role="listitem">Item 2</div>

<div role="list">
    <div role="listitem">Item 1</div>
    <div role="listitem">Item 2</div>
</div>

<div role="menuitem">Open</div>
<div role="menuitem">Save</div>

<ul role="menu">
    <li role="menuitem">Open</li>
    <li role="menuitem">Save</li>
</ul>

Where possible, prefer native HTML elements over ARIA roles.

Why is this important?

ARIA roles have a fixed hierarchy. If the required parent role is missing, screen readers cannot interpret the relationship between HTML elements and may skip the element, announce it incorrectly, or fail to provide certain functionality.