Do not use role="presentation" or role="none" on elements that contain meaningful or interactive content

WCAG 1.3.1
Info and Relationships

Content available in English only.

Accessibility isn’t just about avoiding violations — it’s about ensuring that everyone can use your product with confidence. This guide explains each rule’s intent, highlights common issues, and shows how to fix them according to WCAG and the European Accessibility Act (EAA).

These guidelines do not replace the official WCAG standards. They’re concise, developer-focused notes to help you identify and fix issues effectively.

Only use role="presentation" when the element is purely decorative — never when it contains meaning or interactivity.

Why this matters and how to fix it

Why this matters

The role="presentation" and role="none" attributes remove an element's semantics from the accessibility tree. If the element (or its children) contains interactive controls, headings, list items, table structure, or other meaningful content, screen readers will not be able to identify or operate the content correctly. This can make controls invisible or unusable to assistive technology users.

How to fix this issue

Only use role="presentation" or role="none" for elements that are purely decorative. If an element conveys meaning, structure, or interactivity, remove the presentation role to ensure semantics remain intact. Never apply these roles to elements that contain focusable or interactive descendants.

Automated detection · Manual review recommended

Developer guidance

Common mistakes: applying role="presentation" to <table>, <ul>, <li>, <img> with meaning, or containers wrapping buttons/links. In design systems, add lint rules preventing role="presentation" on elements containing interactive children.

Code examples

Incorrect Implementation

<ul role="none"><li><a href="/products">Products</a></li></ul>

Correct Implementation

<ul><li><a href="/products">Products</a></li></ul>

Real-World Examples

Before

<table role="presentation">
  <tr><th>Item</th><th>Price</th></tr>
  <tr><td>Apple</td><td>$1</td></tr>
</table>
<!-- Screen reader cannot detect table layout → data becomes unreadable -->

After

<table>
  <caption>Grocery Prices</caption>
  <tr><th scope="col">Item</th><th scope="col">Price</th></tr>
  <tr><td>Apple</td><td>$1</td></tr>
</table>

Manual testing

  1. 1. Inspect elements using role="presentation" or role="none".
  2. 2. Check whether the element or any child is interactive (button, link, input, select, summary, details).
  3. • If yes → remove role="presentation".
  4. 3. Check whether the element conveys structure (table, list, heading).
  5. • If yes → remove role="presentation".
  6. 4. Turn on a screen reader and navigate to the element.
  7. • Expected: Semantics should be announced correctly (e.g., list of items, table, button).
eu icon getwcag

Trusted by organizations across Europe working toward WCAG and EAA conformance