Is it okay to use <button>
elements (rather than anchor links) as tabs?
Here's my use-case...
I'm marking up a set of tabs using button elements, and when I try to assign them ARIA roles, I get this validation error:
It appears that the ARIA role tab
is not allowed on <button>
elements. Is there a reason you shouldn't use <button>
for tabs?
In case it's helpful, here's the relevant markup:
<menu type="list" label="Tabs" role="tablist">
<button id="tab-1" role="tab" aria-controls="panel-1" aria-selected="true" tabindex="0">Tab 1</button>
<button id="tab-2" role="tab" aria-controls="panel-2" aria-selected="false" tabindex="-1">Tab 2</button>
</menu>
<section id="panel-1" role="tabpanel" aria-labelledby="tab-1" aria-hidden="false">...</section>
<section id="panel-2" role="tabpanel" aria-labelledby="tab-2" aria-hidden="true">...</section>