What exactly does aria-controls do for the user? How is it affected by AJAX usage?
<p>I have a set of tabs with proper roles and attributes for accessibility support. The content that tab controls gets loaded in via ajax. But each wrapper for the content loaded in also has proper tab pane roles and attributes.</p>

<p>The problem is, when I run an automated audit using Chrome Accessibility Tools, the test fails stating that the corresponding <code>ID</code> of the tab pane is missing for all of the tabs except the one that's currently active (because that wrapper with ID has been loaded). The exact error states: "ARIA attributes which refer to other elements by ID should refer to elements which exist in the DOM."</p>

<p>Since the <code>ID</code> will exist once the tab with the corresponding <code>aria-controls</code> attribute is active, is this really an error? Or is this just a case of a false positive because it's an automated test and they can only do so much.</p>

<p>In summary, What does <code>aria-controls</code> do and does it really need to refer to an <code>ID</code> that currently exists in the DOM? </p>