W3C validation error: aria-controls attribute must point to an element in the same document

Question

I'm running my website through the W3C Markup validator and I'm getting the following error:

The aria-controls attribute must point to an element in the same document. …"ui-accordion-1-header-2" aria-controls="ui-accordion-1-panel-0" tabindex="0">

I've read through the documentation and I not sure where I'm going wrong.

My HTML looks like this:

<ul class="mobile-primary ui-accordion ui-widget ui-helper-reset" role="tablist">
    <li><a class="mobile-tab-trigger ui-accordion-header ui-helper-reset ui-state-default ui-corner-all ui-accordion-icons" href="#" role="tab" id="ui-accordion-1-header-0" aria-controls="ui-accordion-1-panel-0" aria-selected="false" tabindex="0"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>Link 1</a>    
        <ul class="mobile-secondary mobile-expand ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" id="ui-accordion-1-panel-0" aria-labelledby="ui-accordion-1-header-0" role="tabpanel" aria-expanded="false" aria-hidden="true" style="display: none;">
            <li><a href="/Link2/" title="Link 2">Link 2</a></li>
    </ul>    
</ul>

As you can see I have aria-controls="ui-accordion-1-panel-0" and the subsequent <ul> tag is id="ui-accordion-1-panel-0".

Answer 1

I was able to solve this issue by replacing the aria-controls value with the id of the nav element. Works and passes validation.