HTML Guides for superfluous token
Learn how to identify and fix common HTML validation errors flagged by the W3C Validator — so your pages are standards-compliant and render correctly across every browser. Also check our Accessibility Guides.
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
<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
<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>
Validate at scale.
Ship accessible websites, faster.
Automated HTML & accessibility validation for large sites. Check thousands of pages against WCAG guidelines and W3C standards in minutes, not days.
1K Weekly
1,000 monthly checks. Cancel anytime.
Get 1K Weekly →Join teams across 40+ countries