In this Article
What are ARIA roles?
What are ARIA roles?
ARIA (Accessible Rich Internet Applications) roles specify the purpose or function of an element. Most HTML elements infer a default role that assistive technologies recognize. For instance, the <table>
element has a default role of "table." ARIA allows you to define roles that are not natively available in HTML and even override the default roles of the element.
Why Parent-Child Relationships Matter
Parent-child relationships in ARIA are critical because they define the structural and functional relationships between elements, ensuring accessibility for users who rely on assistive technologies, such as screen readers. These relationships help create a clear and logical representation of the web content, enabling better navigation and interaction.
If an element with an ARIA role lacks the necessary parent or child role(s), assistive technologies may not function as intended.
Common Parent-Child Relationships
Some of the more common parent-child role relationships flagged for our clients are listed below:
tablist - must contain one or more elements with the tab role.
list - must contain one or more elements with the listitem role.
table - must contain one or more row roles, and rows should contain cell, gridcell, columnheader, or rowheader roles.
Get tips on how to Fixing ARIA Parent-Child Issues.
Related Articles
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 themCertain 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!