Where to place the aria-controls attribute in my tabs markup : <p>I'm setting up a tabbed content section in my page using a script that follows the following syntax:</p>

<pre><code>&lt;!-- Clickable tab links --&gt;
&lt;ul class="js-tablist"&gt;
    &lt;li id="tab1" class="js-tab active"&gt;&lt;a href="#tabpanel1"&gt;Tab 1&lt;/a&gt;&lt;/li&gt;
    &lt;li id="tab2" class="js-tab"&gt;&lt;a href="#tabpanel2"&gt;Tab 2&lt;/a&gt;&lt;/li&gt;
    &lt;li id="tab3" class="js-tab"&gt;&lt;a href="#tabpanel3"&gt;Tab 3&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;!-- Tab panels --&gt;
&lt;div id="tab-set" class="js-tabpanel-group"&gt;
    &lt;section id="tabpanel1" class="js-tabpanel"&gt;__CONTENT__&lt;/section&gt;
    &lt;section id="tabpanel2" class="js-tabpanel"&gt;__CONTENT__&lt;/section&gt;
    &lt;section id="tabpanel3" class="js-tabpanel"&gt;__CONTENT__&lt;/section&gt;
&lt;/div&gt;
</code></pre>

<p>I will be setting various ARIA roles (<code>role="tablist"</code>, <code>role="tab"</code>, <code>role="tabpanel"</code>, etc) on this structural markup via javascript (since if there's no scripting then there are no tabs) but I'm unsure quite where to place my ‘aria-controls’ attributes. Should they go on the  <code>&lt;li&gt;</code> element or on its <code>&lt;a&gt;</code> child element? Or does it not matter? Indeed, the same question could be asked about <code>role="tab"</code> and <code>tabindex="0"</code> -- should these things go on the list item or the anchor?</p>
