Are you being flagged for one of the following Accessibility issues?
Certain ARIA roles must be contained by particular parents
Certain ARIA roles must contain particular children
This is one of the most common ARIA questions we are asked.
The issue here is very often that a role has been added to an HTML tag that overrides the semantic (innate) meaning of the tag.
An example that would be flagged in DubBot:
<ul role="tablist">
<li>
<a role="tab" href="#">Step 1</a>
</li>
<li>
<a role="tab" href="#">Step 2</a>
</li>
</ul>
By adding the role="tablist" to the <ul>, it has overridden the semantic (innate) meaning of the <ul> as an unordered list. A screen reader now thinks the <ul> is a tablist instead of an <ul>.
The <li> then looks like it does not have a parent <ul> because the <ul> is seen a tablist to screen reader technologies.
The general practice is to make the <li> have role="presentation" in these cases to prevent this issue.
By using role="presentation," a screen reader will know that the element is being used only for presentation and does not have any accessibility semantics, which also leaves it out of the accessibility tree.
Corrected code:
<ul role="tablist">
<li role="presentation">
<a role="tab" href="#">Step 1</a>
</li>
<li role="presentation">
<a role="tab" href="#">Step 2</a>
</li>
</ul>
More information on Hiding Semantics with the Presentation Role from the W3C.
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!