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

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

<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

<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:

<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.

Learn more:

MDN Reference

ARIA States and Properties - MDN

→

MDN Reference

The button element - MDN

→

WHATWG Spec

ARIA in HTML

→