Skip to main content
HTML Validation

Element “label” is missing one or more of the following attributes: “aria-checked”, “aria-level”, “role”.

About This HTML Issue

A <label> can't carry aria-expanded unless it also has a role, and the validator reports this message when it finds one that doesn't.

aria-expanded tells assistive technologies whether a control's collapsible content, such as an accordion panel or a menu, is open or closed. ARIA allows it only on interactive roles like button, combobox, link or tab. A <label> has no ARIA role of its own, since its only job is to name a form control. The message lists three attributes, but only role clears it. Add aria-checked or aria-level and the validator asks for role instead.

The message usually comes from an accordion whose clickable header is a <label>, often with aria-controls pointing at the panel and a script that toggles it. Keyboard users can't reach that header, because a <label> doesn't take focus, and screen readers don't announce it as something to press. Make the header a <button type="button"> and move aria-expanded and aria-controls onto it. If the section has a title, put the button inside a heading. A <button> has no for attribute, so drop it. For a simple disclosure that needs no script, <details> and <summary> track the open state without any ARIA.

Adding role="button" and tabindex="0" to the <label> also clears the message. You then have to handle the Enter and Space keys in script, though, and a <label> linked to a form control keeps forwarding its clicks to that control. That link causes a second error too: the validator reports that aria-expanded and aria-controls must not be used on a <label> associated with a form control. A <label> that wraps its control gets a similar message about a label that is an ancestor of a labelable element.

Invalid example

<label id="shipping-header" aria-expanded="false" aria-controls="shipping-panel">
  Shipping
</label>
<div id="shipping-panel" role="region" aria-labelledby="shipping-header" hidden>
  <p>Orders ship within two business days.</p>
</div>

Valid example

<h2>
  <button type="button" id="shipping-header" aria-expanded="false" aria-controls="shipping-panel">
    Shipping
  </button>
</h2>
<div id="shipping-panel" role="region" aria-labelledby="shipping-header" hidden>
  <p>Orders ship within two business days.</p>
</div>

Find issues like this automatically

Rocket Validator scans thousands of pages in seconds, detecting HTML issues across your entire site.

Help us improve our guides

Was this guide helpful?
🌍 Trusted by teams worldwide

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.

Scheduled Reports
API Access
Open Source Standards
€5 / week

1K Weekly

1,000 monthly checks. Cancel anytime.

Get 1K Weekly →

Join teams across 40+ countries