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 (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.
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
ARIA Authoring Practices Guide - good examples of some of the more common patterns (expandables, carousel, etc.)
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!