Skip to content
SilktideHelp

Missing aria-controls ID

Silktide checks every aria-controls attribute on your pages and verifies that the element IDs it lists actually exist. This attribute declares which part of the page a control operates on, such as the panel a tab shows or the menu a button opens.

<!-- Problem: no element on the page has id="filter-panel" -->
<button aria-expanded="false" aria-controls="filter-panel">Filters</button>

Why this matters

The aria-controls attribute lets connect a control to the content it affects - some offer a shortcut to jump straight to the controlled element. When the reference is broken, that relationship silently disappears. Broken references usually mean an ID was renamed or a component was removed, so they are also an early warning that the widget itself may no longer work as intended.

How to fix it

  1. Make each ID listed in aria-controls match the id of a real element on the same page. The attribute may list several IDs separated by spaces; check each one.
  2. If the controlled element is added dynamically, either render it hidden from the start or set aria-controls once it exists.
  3. If the controlled element is gone for good, remove the attribute.

How Silktide tests this

  1. Find every element on the page with an aria-controls attribute.
  2. Check each ID it references against the element IDs present on the page.
  3. Report each reference that matches no element.

Troubleshooting

The target is created later by a script

Silktide tests the page as it loads. If the referenced panel only appears after user interaction, the reference is broken until then - prefer keeping the target in the page (hidden) so the reference always resolves.

This check reports nothing even though I expect findings

ARIA testing can be turned off per website. Check the advanced settings for the website.

Learn more

Last updated

Was this page helpful?

Missing aria-controls ID | Silktide Help