# Bad value X for attribute “role” on element “button”.

> Canonical HTML version: https://rocketvalidator.com/html-validation/bad-value-x-for-attribute-role-on-element-button
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

A `<button>` element accepts only a short list of ARIA roles in its `role` attribute, and the validator rejects every other value.

The ARIA in HTML specification allows these roles on a `<button>`: `checkbox`, `combobox`, `gridcell`, `link`, `menuitem`, `menuitemcheckbox`, `menuitemradio`, `option`, `radio`, `separator`, `slider`, `switch`, `tab` and `treeitem`. Anything else fails: real ARIA roles like `heading` or `img`, made-up words like `btn`, and the presentational roles `none` and `presentation`. Some of the allowed roles bring their own requirements, such as `aria-checked` for `switch`, which the validator reports as separate errors.

`role="none"` usually shows up on a `<button>` that is only decoration, like the plus or chevron icon of an accordion, often next to `tabindex="-1"` and `aria-hidden="true"` to keep it away from keyboard and screen reader users. The role adds nothing there. Browsers ignore `none` and `presentation` on elements that can receive focus, buttons included, so the element keeps its `button` role.

If the element isn't a control, it shouldn't be a `<button>`. Put the icon in a `<span>` with `aria-hidden="true"`, inside the real button, so the whole row stays clickable and screen readers skip the icon. If the element is a control, remove the `role` attribute, or replace it with one of the allowed roles that describes what the button does.

## Invalid example

```html
<div class="faq-question">
  <h3>
    <button type="button" aria-expanded="false" aria-controls="answer-1">How long does shipping take?</button>
  </h3>
  <button type="button" class="faq-icon" role="none" tabindex="-1" aria-hidden="true">+</button>
</div>
<div id="answer-1" hidden>Orders ship within two business days.</div>
```

## Valid example

```html
<h3>
  <button type="button" aria-expanded="false" aria-controls="answer-1">
    How long does shipping take?
    <span class="faq-icon" aria-hidden="true">+</span>
  </button>
</h3>
<div id="answer-1" hidden>Orders ship within two business days.</div>
```