# Bad value “” for attribute “aria-controls” on element “button”: An IDREFS value must contain at least one non-whitespace character.

> Canonical HTML version: https://rocketvalidator.com/html-validation/bad-value-for-attribute-aria-controls-on-element-button-an-idrefs-value-must-contain-at-least-one-non-whitespace-character
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The `aria-controls` attribute on a `button` element has an empty value, but it requires at least one valid ID reference.

The `aria-controls` attribute accepts a space-separated list of `id` values that point to the elements controlled by the current element. When a screen reader encounters a button with `aria-controls`, it can offer the user a way to navigate to the controlled element. An empty string (`""`) is not a valid IDREF, so the W3C validator rejects it.

This often happens when a template or JavaScript framework sets `aria-controls` before the target element's `id` is known, or when the value is conditionally generated and falls through to an empty string.

There are two ways to fix this: either set `aria-controls` to a valid `id` that exists in the document, or remove the attribute entirely when no target is available. An absent `aria-controls` attribute is perfectly fine and preferable to an empty one.

## HTML examples

### Invalid: empty `aria-controls`

```html
<button aria-controls="" aria-expanded="false">
  Toggle menu
</button>
<nav id="main-menu" hidden>
  <a href="/about">About</a>
</nav>
```

### Fixed: `aria-controls` references a valid ID

```html
<button aria-controls="main-menu" aria-expanded="false">
  Toggle menu
</button>
<nav id="main-menu" hidden>
  <a href="/about">About</a>
</nav>
```

If the controlled element does not exist yet or the ID is not available, remove the attribute:

```html
<button aria-expanded="false">
  Toggle menu
</button>
```

JavaScript can add `aria-controls` later, once the target element and its `id` are present in the DOM.
