Skip to main content
All CollectionsAccessibility HelpARIA
ARIA Roles and Parent-Child Issues: Correcting
ARIA Roles and Parent-Child Issues: Correcting
Updated over a week ago

In this Article

Why it Matters

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

Parent-child issues can be flagged in both directions:

  • parents that must have a child and

  • children that must have a specific parent element.

Diagnosing a Problem from a Page View

Do you have 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:

  1. From the Detail Page View in DubBot, expand the details for the Issue you are investigating

  2. In the Element Source section, find the "role=" that has been flagged.

  3. 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 for roles frequently flagged for parent-child role issues.

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 (shown in sample below)

  • 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.

A common example, let's look at <ul role="tablist">. Assigning the role="tablist" to the unordered list <ul> overrides the inherent role of the content from unordered list to the role of 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

Using role=presentation provides another method of correcting parent-child role issues.

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

Related Articles

Learn More

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!

Did this answer your question?