HTML Guide for aria-controls

Empty aria-controls attribute values are invalid; the attribute must reference the id of one or more elements.

The aria-controls attribute is used to indicate that the element controls the referenced element(s) by their id. According to the ARIA specification and W3C HTML standard, the attribute must contain at least one valid id value, and cannot be an empty string. Leaving aria-controls="" triggers a validation error.

Correct Usage:

• Assign an id to the element being controlled.
• Set the aria-controls attribute to match that id.
• Remove aria-controls entirely if not necessary.

Incorrect Example:

<a href="#" aria-controls="">Toggle</a>

Corrected Example:

<div id="details">Some details...</div>
<a href="#" aria-controls="details">Toggle</a>

If no element is being controlled:

<a href="#">Toggle</a>

The aria-controls attribute identifies an element or elements in the same document whose contents or presence are controlled by the current element. It must point to existing elements by their ID. Check that the IDs contained in that property exist within the same document.

ARIA can express semantic relationships between elements that extend the standard parent/child connection, such as a custom scrollbar that controls a specific region, for example:

<div role="scrollbar" aria-controls="main"></div>
<div id="main">
  . . .
</div>