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

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

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

Fixed: remove the attribute when unused

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

Fixed: provide a valid ID when a controlled element exists

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

Learn more:

MDN Reference

MDN Web Docs: aria-controls

→

MDN Reference

MDN Web Docs: ARIA

→

MDN Reference

WAI-ARIA Practices

→