# Discarding superfluous token X from value of attribute “role”. Browsers only process the first token found that is a defined ARIA non-abstract role.

> Canonical HTML version: https://rocketvalidator.com/html-validation/discarding-superfluous-token-x-from-value-of-attribute-role-browsers-only-process-the-first-token-found-that-is-a-defined-aria-non-abstract-role
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The `role` attribute lists more than one ARIA role, and browsers use only the first one they recognize.

The value of `role` is a list of tokens separated by spaces. WAI-ARIA allows the list as a fallback mechanism: the browser reads the tokens from left to right and uses the first one that names a defined, non-abstract ARIA role. Every token after that one is ignored. The validator names the ignored token in the message. When there are several, it lists them all in a single message.

A repeated role, such as `role="region region"`, is the most common cause. Page builders and templates produce it when two pieces of code each add the same role to one element. The browser treats it exactly like `role="region"`, so deleting the copy changes nothing for screen reader users. For this particular role you can also use a `<section>` with an accessible name, which has the `region` role without any `role` attribute.

The other cause is a fallback list written on purpose, such as `role="switch checkbox"`, meant for browsers that don't support the first role. A browser that knows `switch` never reads `checkbox`. Keep the one role that describes what the element does and remove the rest. If two different roles both seem to fit, the element is probably doing two jobs, and it's better to split it into two elements.

When the first token isn't a valid role, the validator reports it with a different message, "Discarding unrecognized token", and browsers move on to the next token in the list.

## Invalid example

```html
<div role="region region" aria-labelledby="faq-heading">
  <h2 id="faq-heading">Frequently asked questions</h2>
  <p>Answers to common questions about shipping and returns.</p>
</div>

<button type="button" role="switch checkbox" aria-checked="false">Dark mode</button>
```

## Valid example

```html
<div role="region" aria-labelledby="faq-heading">
  <h2 id="faq-heading">Frequently asked questions</h2>
  <p>Answers to common questions about shipping and returns.</p>
</div>

<button type="button" role="switch" aria-checked="false">Dark mode</button>
```