Fixing ARIA Parent-Child Issues | DubBot Help Center

Why it Matters

Assistive technologies utilize ARIA tags to help give the user the context of an item in the content. Some role values (the parents) must contain other role(s) (the children) so the intended accessibility of the role can function as expected.

Elements utilizing certain ARIA roles require that the contents within the element also have certain roles. These issues can be flagged in both directions, i.e. parents that must have a child and children that must have a specific parent element.

Diagnosing a Problem from a Page View

Seeing one of these errors?

Certain ARIA roles must contain particular children
Certain ARIA roles must be contained by particular parents

Follow these steps to begin your diagnosis:

From the Detail Page View in DubBot, expand the details for the Issue you are investigating
In the Element Source section, find the "role=" that has been flagged.
When you have located the flagged role in the Element Source, visit our Parent-Child Required Roles Quick Reference to locate the required parent or child for the flagged role.

Accessibility Tab selected on a Detail Page view with an Issue expanded to show the Element Source filed and highlighting role=list in the HTML

Common Issues with DubBot Clients

Visit our Parent-Child Required Roles Quick Reference to locate frequently flagged required parent or child roles.

For detailed information, visit the WAI-ARIA Overview document on what is required for each role flagged for parent-child relationship issues in DubBot. For the parent roles listed below, look in the Characteristics table, in the Required Owned Elements row for the choices of valid child roles that the parent role should own.

tablist : must own at least one tab.
list : must own at least one of the following listitem or group>listitem
table: must own at least one of the following: row or rowgroup>row.

List role entry in the ARIA Overview Document with the Required Owned Elements highlighted.

Roles that Override Semantic HTML

We often see that a role is added to an HTML tag that overrides the inherent role of the tag.

An example, <ul role="tablist">. Assigning the role="tablist" to the unordered list <ul> overrides the inherent role of the content from an unordered list to the role of a tablist. Therefore, an unordered list <ul> with role="tablist" should contain elements with the role="tab".

Correct HTML example utilizing tablist:

<ul role="tablist">

<li role="tab" aria-controls="panel-1">Tab 1</li>

<li role="tab" aria-controls="panel-2">Tab 2</li>

<li role="tab" aria-controls="panel-3">Tab 3</li>

</ul>

<div role="tabpanel" id="panel-1">Panel 1</div>

<div role="tabpanel" id="panel-2" class="hidden">Panel 2</div>

<div role="tabpanel" id="panel-3" class="hidden">Panel 3</div>

Using role=presentation to Hide HTML Semantics

Sometimes a role is added to an HTML tag that overrides the inherent role of the tag.

An example, <ul role="tablist">. Assigning the role="tablist" to the unordered list <ul> overrides the inherent role of the content from an unordered list to a tablist.

Learn about Hiding Semantics with role=presentation to resolve ARIA parent/child issues.

Learn More

Using WAI-ARIA from W3C
WAI-ARIA Roles from mdn docs
Understanding Information and Relationships (A) from WCAG
ARIA Authoring Practices Guide - good examples of some of the more common patterns (expandables, carousel, etc

DubBot Flags:

Certain ARIA roles must contain particular children
Ensures elements with an ARIA role that require child roles contain them
Certain ARIA roles must be contained by particular parents
Ensures elements with an ARIA role that require parent roles are contained by them

If you have questions, please contact our DubBot Support team via email at help@dubbot.com or via the blue chat bubble in the lower right corner of your screen. We are here to help!

In this Article