🙈

Hiding Semantics with the presentation Role

The presentation role removes implicit ARIA semantics from the accessibility tree while keeping content visible.

This practice is documented in detail at Hiding Semantics with the presentation Role - WAI-ARIA APG . Below we provide additional context specific to our pattern implementations.

Overview

The presentation role (and its synonym none) removes the implicit ARIA semantics of an element from the accessibility tree. This can be useful when an element’s visual appearance doesn’t match its semantic meaning, but it must be used carefully to avoid hiding important information from assistive technology users.

When to Use presentation/none

Decorative Images

Images that don’t convey content:

<img src="decorative-border.png" alt="" />

Empty alt is preferred for decorative images.

<img src="decorative-border.png" role="presentation" />

Alternatively, use the presentation role.

Layout Tables

Tables used only for visual layout:

<table role="presentation">
  <tr>
    <td>Left column content</td>
    <td>Right column content</td>
  </tr>
</table>

Redundant Container Elements

When a parent element’s role is redundant:

<div role="tablist">
<ul role="presentation">
  <li role="presentation">
    <button role="tab">Tab 1</button>
  </li>
  <li role="presentation">
    <button role="tab">Tab 2</button>
  </li>
</ul>
</div>

Tab panels using ul/li for styling — ul and li roles are removed with presentation.

presentation vs none

These roles are synonymous:

<div role="presentation">...</div>
<div role="none">...</div>

Both are equivalent.

role="none" was introduced to clarify intent. role="presentation" is more widely supported in older assistive technology.

What presentation/none Removes

Element	Original Role	After presentation
`<table>`	table	none
`<ul>`	list	none
`<li>`	listitem	none
`<img>`	img	none

Important: The role only affects the element itself, not its descendants (except for required children).

Required Children Are Also Hidden

Some roles have required children that are automatically hidden:

<table role="presentation">
<tr><td>...</td></tr>
</table>

tbody, tr, td roles are also removed because they are required children of table.

<ul role="presentation">
<li>...</li>
</ul>

li roles are also removed because listitem is a required owned element of list.

What presentation/none Cannot Hide

Focusable Elements

If an element is focusable, role="presentation" is ignored:

<button role="presentation" tabindex="0">Still a button</button>

role="presentation" is ignored because the element has tabindex.

<a href="/page" role="presentation">Still a link</a>

Links with href are focusable, so the role is ignored.

Elements with Global ARIA Attributes

If aria-label, aria-describedby, or other global ARIA attributes are present:

<img role="presentation" aria-label="Important info" />

role="presentation" is ignored when global ARIA attributes are present.

Implementation Tips

Hiding Decorative Icon Buttons

<button type="button" aria-label="Close">
<svg aria-hidden="true">...</svg>
</button>

The icon is decorative — aria-hidden="true" hides it from assistive technology.

Use aria-hidden="true" instead of role="presentation" for content that should be completely hidden from assistive technology.

Hiding Redundant Text

<button>
<svg aria-hidden="true">...</svg>
<span class="visually-hidden">Close</span>
Close
</button>

The visible text "Close" provides the accessible name.

Common Pitfalls

Hiding Meaningful Content

<img src="chart.png" role="presentation" alt="Sales chart" />

Bad: Hiding an important image that conveys content.

<img src="chart.png" alt="Sales chart showing 20% growth" />

Good: Keep meaningful images accessible with descriptive alt text.

Using presentation on Interactive Elements

<button role="presentation">Click me</button>

Bad: The role is ignored because button is focusable.

Forgetting aria-hidden for Complete Hiding

<div role="presentation">Text content</div>

This still appears in the accessibility tree — only the role is removed.

<div aria-hidden="true">Text content</div>

This is completely hidden from assistive technology.

Use aria-hidden="true" when you want to hide both the element and its content from assistive technology.