Digital Accessibility Knowledge Base

aria-required-parent

Certain ARIA roles must be contained by particular parent elements

Who might be affected
Screen Reader

Description

Sometimes it is necessary to use non-semantic elements to extend semantics that do not exist naturally in HTML or because of other constraints. In any case, if the element's semantics require a certain structure (e.g. list item (<li>), is only meaningful when it is a direct child of an ordered or unordered list (<ol>, <ul>). This will also apply to a non-semantic element (e.g. <div>) that will express the same semantics. Using the role attribute is a promise to fulfill certain semantic attributes.

Quick Fixes

Make sure that all elements have a proper parent for their semantics.
If you are not sure if and which parent type an element requires, check out this roles list on the WAI ARIA spec.
1    <div>
2✗       <div role="listitem"><!-- List item content --></div>
3    </div>
4

5    <div role="list">
6✓       <div role="listitem"><!-- List item content --></div>
7    </div>
8

9    <div>
10✗       <div role="menuitem">Menu Item</dt>
11    </div>
12

13    <div role="menu">
14✓       <div role="menuitem">Menu Item</dt>
15    </div>
You can define an implicit parent-child relationship between DOM elements using the "aria-owns" attribute.
1

2✓   <div role="list" aria-owns="li-1 li-2 li-3">
3        List Title
4    </div>
5

6    <div role="listitem" id="li-1"><!-- List item content --></div>
7    <div role="listitem" id="li-2"><!-- List item content --></div>
8    <div role="listitem" id="li-3"><!-- List item content --></div>
Warning! Note that "aria-owns" and "aria-controls" are supported only byJAWS, although it is one of the most popular screen readers, it is for windows OS only and therefore not relevant, for example, to mobile devices so it does not cater for a large number of users.

How Users Are Affected

When a screen reader fails to parse the semantic meaning of UI elements, it cannot mediate it correctly to the user. As a result, the user receives a partial or even incorrect mental image of the UI and might fail to use it.

WCAG Success criteria

This issue might cause elements to fail one or more of the following Success criteria:
1.3.1 Info and relationships (A)