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 Fix ARIA Parent-Child Issues.
Resources
Using WAI-ARIA (from W3C)
WAI-ARIA Roles (from mdn docs)
Learn More with WCAG
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!