# Bad value “” for attribute “aria-controls” on element “div”: 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-div-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 must contain at least one valid ID reference and cannot be an empty string.

The `aria-controls` attribute accepts a space-separated list of IDs pointing to elements that are controlled by the current element. When a screen reader encounters `aria-controls`, it can offer navigation to those referenced elements. An empty string is not a valid IDREF value per the WAI-ARIA specification, so the W3C validator rejects it.

If the element does not currently control anything, remove the `aria-controls` attribute entirely rather than leaving it empty. Setting it to an empty string does not mean "no value" — it means "invalid value," which can confuse assistive technologies.

If the controlled element is added dynamically (for example, a dropdown that appears after user interaction), add `aria-controls` through JavaScript at the same time the controlled element appears in the DOM, and remove it when the element is gone.

## Examples

### Invalid: empty `aria-controls`

```html
<div aria-controls="" aria-expanded="false">
  Toggle panel
</div>
```

### Fixed: remove the attribute when unused

```html
<div aria-expanded="false">
  Toggle panel
</div>
```

### Fixed: provide a valid ID when a controlled element exists

```html
<div aria-controls="panel-1" aria-expanded="true">
  Toggle panel
</div>
<div id="panel-1">
  Panel content here.
</div>
```