All Collections
Accessibility Help
ARIA
Resolving ARIA roles - Parent and Children Issues
Resolving ARIA roles - Parent and Children Issues

Hiding Semantics with role=presentation

Updated over a week ago

Are you are 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>. 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.

Correct ARIA:

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

Did this answer your question?