ARIA: presentation role

The presentation role and its synonym none remove an elements implicit native semantics, such as headings, lists, etc., from the accessibility tree.

The content is still available to assistive technologies; just the semantics of the container and required associated nested descendants are no longer mapped 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 the presentation role or its synonym role none, 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 the <h2> 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 descendents, such as the various <table>, elements and <li>s children of a <ul> or <ol>, the presentation or none role on the table or list removes the default semantics of the element on which it was applied and their required descendant elements.

If presentation or none 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.

<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 the presentation role was applied to the <ul> element, every child <li> element inherits the presentation role. This is because ARIA requires the listitem elements to have a parent list 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 with role="presentation" or role="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 the presentation or none role directly applied to it. Browsers ignore role="presentation" and role="none"on focusable elements, including link and inputs, or anything with a tabindex attribute set.Browsers also ignore the inclusion of the role if any of the element contains any global ARIA states and properties, such as aria-describedby.

Note: The element with role="presentation" is not part of the accessibility tree and should not have an accessible name. Do not use aria-labelledby or aria-label.

Associated WAI-ARIA roles, states, and properties

None. If a global ARIA state and property is set, presentation or none will be ignored, and the implicit role of the element will be used.

Examples

<img src="spacer.gif" role="none" alt="">

Specifications

Specification Status
Accessible Rich Internet Applications (WAI-ARIA) 1.1
The definition of 'ARIA: presentation role' in that specification.
Recommendation
WAI-ARIA Authoring Practices 1.2
The definition of 'Hiding semantics with the presentation role' in that specification.
Working Draft

See Also