CODEWITHSUNDEEP
htmlaccessibilitywai-aria
marcvangend
marcvangend

Reputation: 5642

Are ARIA roles inherited by descendants?

In the following markup, I have a wrapper around the <main> element for presentational purposes.

<div id="main-wrapper" role="presentation">
  <main id="main" role="main">
    <h1>Title</h1>
    <p>Lorem ipsum, dolor sit amet.</p>
  </main>
</div>

However I am not sure if ARIA roles are inherited by descendants. It would be a problem if the <main> element is seen as presentational because the wrapper around it has role="presentation".

Are the ARIA roles used correctly here? How are ARIA roles inherited?

Upvotes: 6

Views: 968

Answers (1)

hexalys
hexalys

Reputation: 5257

It probably depends on the context and the roles. The specs and examples at: https://www.w3.org/TR/wai-aria-1.1/#presentation give a list of "Inherited States and Properties" for each role and good examples for role="presentation".

For your case, a wrapper element with role="presentation" will have the implicit native semantics of all its descendant elements removed. role="main" overrides "presentation" restoring the <main> semantic. But that would also mean you would have to override semantics elements within <main> with their respective ARIA roles, which would become extremely complicated in the context of <main>

But most importantly, role="presentation" shall only be applied to elements with an implicit role. <span> or <div> have no implicit roles as explained in the editor's draft with an example:

The presentation role is used on an element that has implicit native semantics, meaning that there is a default accessibility API role for the element

<!-- 3. This role declaration is redundant. -->
<span role="presentation"> Sample Content </span>

Basically never apply role="presentation" to an element with no implicit native semantics, unless used specifically as wrapper to remove implicit native semantics of its descendants.

Upvotes: 4

Related Questions