What exactly does aria-controls do for the user? How is it affected by AJAX usage?

Question

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.

The problem is, when I run an automated audit using Chrome Accessibility Tools, the test fails stating that the corresponding ID 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."

Since the ID will exist once the tab with the corresponding aria-controls 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.

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

Answer 1

aria-controls give your assisting technology a way to move to the controlled element.

If this element is not in the DOM or can't be accessed, then yes it's an error.