Skip to main content
All CollectionsAccessibility HelpARIA
Fix ARIA Parent-Child Issues
Fix ARIA Parent-Child Issues
Updated yesterday

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 parent element.

Common Issues with DubBot Clients

The WAI-ARIA Overview document provides detailed information on what is required for each of these most common parent roles 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.

A list of all roles with their accompanying definitions can be found in section 5.4 Definition of Roles of the ARIA Overview document.


Sample Tablist HTML

An unordered list (ul) with role="tablist" should contain elements with the role="tab".

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 with W3C & WCAG

Looking for the basics on parent-child issues? Check out our article on ARIA Roles and Parent-Child Relationships.

DubBot Flags

  • Certain ARIA roles must contain particular children

  • Certain ARIA roles must be contained by particular parents

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?