HTML check: Bad value X for attribute “role” on element “button”.

About This HTML Issue

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

<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

<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>