# The “presentation” role does not affect elements that have global ARIA attributes.

> Canonical HTML version: https://rocketvalidator.com/html-validation/the-presentation-role-does-not-affect-elements-that-have-global-aria-attributes
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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:

```html
<div role="presentation" aria-label="Main navigation">
  ...
</div>
```

## Valid example

Keep the label and drop the ineffective role:

```html
<div aria-label="Main navigation">
  ...
</div>
```

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

```html
<div role="presentation">
  ...
</div>
```