: W3C validation error: aria-controls attribute must point to an element in the same document I'm running my website through the W3C Markup validator and I'm getting the following error: The

Posted in: #Accessibility #Validation #W3cValidation

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".