Button Elements as Tabs

Question

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>

Answer 1

Button and Tab are in different parts of the role hierarchy:

• Button is part of the command interface

• Tab is part of the sectionhead interface