HTML Guides for accessibility

The role="presentation" on this element is ignored because the element also carries a global ARIA attribute, such as aria-label or aria-describedby.

role="presentation" (and its synonym role="none") removes an element's implicit semantics so assistive technologies treat it as if it were plain content. Global ARIA states and properties, such as aria-label, aria-describedby, aria-live, and aria-hidden, are allowed on any element regardless of its role. When one of them is present, the browser cannot silence the element, because that attribute needs a role to attach to. The ARIA specification resolves this conflict by ignoring the presentation role and exposing the element's implicit role instead.

The result is that role="presentation" does nothing here, which is almost always a mistake. Decide which of the two you actually want.

If the element should stay presentational, remove the global ARIA attribute. If you need the ARIA attribute, remove role="presentation" and let the element keep its semantics.

Invalid example

The aria-label cancels the presentation role, so the <div> is not silenced:

<div role="presentation" aria-label="Main navigation">

...

</div>

Valid example

Keep the label and drop the ineffective role:

<div aria-label="Main navigation">

...

</div>

Or, if the element was only meant to be presentational, remove the ARIA attribute:

<div role="presentation">

...

</div>