HTML Checking for Large Sites

A button element, or an element with the role=button attribute, is not allowed to be nested inside an <a> element.

A button element cannot contain a descendant element with the attribute tabindex.

The aria-expanded attribute can only be true, false, or undefined.

This attribute indicates whether a grouping element is expanded or collapsed.

A <li> element, used to define a list item, does not accept the button role.

This HTML code is invalid because the <li> elements can’t have role="button":

<ul>
  <li role="button">One</li>
  <li role="button">Two</li>
</ul>

The button role is used to make an element appear as a button control to a screen reader and can be applied to otherwise non-interactive elements like <div>. If you’re already using a <button> element, then it’s redundant to apply it the role button, as that’s implicit.

<!-- Instead of this -->
<button role="button">Buy</button>

<!-- Do this -->
<button>Buy</button>

The button role is used to make an element appear as a button control to a screen reader and can be applied to otherwise non-interactive elements like <div>. If you’re already using an <input> element whose type is submit, then it’s redundant to apply it the role button, as that’s implicit.

<!-- Instead of this -->
<input type="submit" role="button">Buy</button>

<!-- Do this -->
<input type="submit">Buy</button>

The <summary> HTML element specifies a clickable summary, caption, or legend for a <details> element’s disclosure box. As the <summary> element has an implicit button role, it’s not needed to include it explicitly.

Here’s an example, clicking the <summary> element toggles the state of the parent <details> element open and closed.

<details>
    <summary>I have keys but no doors. I have space but no room. You can enter but can’t leave. What am I?</summary>
    A keyboard.
</details>

A button element is not allowed to contain other button elements, or other elements with role=button.

The button role identifies an element as a button to assistive technology such as screen readers. A button is a widget used to perform actions such as submitting a form, opening a dialog, canceling an action, or performing a command such as inserting a new record or displaying information. Adding role="button" tells assistive technology that the element is a button but provides no button functionality

A button element, or an element with the role=button attribute, is not allowed to be nested inside an <a> element.

An element with role=button can’t have an input element as descendant.

The ARIA role button can be added to an element to make it behave like a <button> – just like a <button> is not allowed to contain other <input> elements as descendants, any element with this role is not allowed to contain them either.

All these examples in the following code will raise a similar issue:

<div role="button">
  <input type="checkbox" />
</div>

<button>
  <input type="checkbox" />
</button>

<a>
  <input type="checkbox" />
</a>