ARIA: presentation role

Thepresentation role and its synonymnone remove an element's implicit ARIA semantics from being exposed to the accessibility tree.

The content of the element will still be available to assistive technologies; it is only the semantics of the container — and in some instance, required associated descendants — which will no longer expose their mappings to the accessibility API.

Description

While ARIA is primarily used to express semantics, there are some situations where hiding an element's semantics from assistive technologies is helpful. This is done with thepresentation role or its synonym rolenone, which declare that an element is being used only for presentation and therefore does not have any accessibility semantics.

Writing<h2 role="presentation">Democracy Dies in Darkness</h2> removes the heading semantics of theh2 element, making it the equivalent of<div>Democracy Dies in Darkness</div>. The heading role semantics are removed, but the content itself is still available.

When an element has required descendants, such as the various<table>, elements and<li>s children of a<ul> or<ol>, thepresentation ornone role on the table or list removes the default semantics of the element on which it was applied and their required descendant elements.

Ifpresentation ornone is applied to a<table> element, the descendant<caption>,<thead>,<tbody>,<tfoot>,<tr>,<th>, and<td> elements inherit the role and are thus not exposed to assistive technologies. But, elements inside of the<th> and<td> elements, including nested tables, are exposed to assistive technologies.

html

<ul role="presentation">  <li>    <a href="#">Link 1</a>  </li>  <li>    <a href="#">Link 2</a>  </li>  <li>    <a href="#">Link 3</a>  </li></ul>

Because thepresentation role was applied to the<ul> element, every child<li> element inherits thepresentation role. This is because ARIA requires thelistitem elements to have a parentlist element. While the<li> elements, in this case, are not exposed to assistive technologies, descendants of those required elements are exposed. If we had nested a list within one of those<li>'s, they would be visible to assistive technologies. For elements with no required children, any elements nested inside the element withrole="presentation" orrole="none" preserve their semantics. In this case, the<a> elements contained inside of those<li> elements are exposed.

The<a> is a special case. Its role would have been exposed even if it had thepresentation ornone role directly applied to it. Browsers ignorerole="presentation" androle="none" on focusable elements, including link and inputs, or anything with atabindex attribute set. Browsers also ignore the inclusion of the role if any of the element contains any global ARIA states and properties, such asaria-describedby.

Note:The element withrole="presentation" is not part of the accessibility tree and should not have an accessible name. Donot usearia-labelledby oraria-label.