# The “aria-expanded” attribute must not be used on any “label” element that is associated with a labelable element.

> Canonical HTML version: https://rocketvalidator.com/html-validation/the-aria-expanded-attribute-must-not-be-used-on-any-label-element-that-is-associated-with-a-labelable-element
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

A `<label>` whose `for` attribute points at a form control can't carry `aria-expanded`, because the label only names that control and has no open or closed state to report.

`aria-expanded` tells assistive technologies whether the content a control shows and hides, such as a dropdown menu or an accordion panel, is open right now. Screen readers read it out when the control gets focus, as in "Menu, button, collapsed". ARIA permits it on interactive roles like `button`, `checkbox`, `combobox`, `link` and `tab`.

Assistive technologies don't expose a `<label>` linked by `for` as an element in its own right. They read its text as the control's accessible name, and focus goes to the control, so a state set on the label is never announced. A `<label>` that wraps its control instead of using `for` gets a separate message, about a label that is an ancestor of a labelable element. The fix is the same.

The message usually comes from a CSS-only toggle: a hidden checkbox opens a mobile menu, or hidden radio buttons switch slides or tabs, and the `<label>` is styled as the button. CSS can't change attributes, so a hard-coded `aria-expanded="false"` stays `false` after the menu opens. Moving it onto the checkbox clears the error but leaves the value just as stale. Use a `<button type="button">` with `aria-expanded` and `aria-controls` instead, with a short script that flips the value and shows or hides the content. If you'd rather avoid script, `<details>` and `<summary>` report their open state to assistive technologies with no ARIA at all.

For a slider or tabs built from radio buttons, remove `aria-expanded`. The checked radio already tells screen readers which slide is selected, and the validator rejects `aria-expanded` on `<input type="radio">` unless the input also has a `role`.

## Invalid example

```html
<nav>
  <input type="checkbox" id="menu-toggle" class="menu-toggle">
  <label for="menu-toggle" aria-expanded="false">Menu</label>
  <ul class="menu">
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>
```

## Valid example

```html
<nav>
  <button type="button" id="menu-button" aria-expanded="false" aria-controls="main-menu">
    Menu
  </button>
  <ul id="main-menu" hidden>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

<script>
  const button = document.getElementById("menu-button");
  const menu = document.getElementById("main-menu");

  button.addEventListener("click", () => {
    const open = button.getAttribute("aria-expanded") === "true";
    button.setAttribute("aria-expanded", String(!open));
    menu.hidden = open;
  });
</script>
```