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.

An <a> element cannot contain a descendant element with the attribute tabindex.

Learn more:

• MDN: tabindex

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

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

Learn more:

• MDN: Element.ariaExpanded

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>

Learn more:

• MDN: ARIA button role

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>

Learn more:

• MDN: ARIA button role

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>

Learn more:

• MDN: summary element

• MDN: ARIA button role

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>

Learn more:

• HTML Spec: the button element
• MDN: ARIA button role

A label element is not allowed as a descendant of a button element.

The label element represents a caption in a user interface. The caption can be associated with a specific form control, known as the label element’s labeled control, either using the for attribute, or by putting the form control inside the label element itself.

Learn more:

• HTML Spec: the label element