作为选项卡的按钮元素

Question

可以使用<button>元素(而不是锚链接)作为选项卡吗？

这是我的用例...

我使用按钮元素标记了一组选项卡，当我尝试为它们分配ARIA角色时，我得到了这个验证错误：

​

​

似乎不允许在<button>元素上使用ARIA角色tab。有没有什么原因让你不应该使用<button>做标签？

如果有用的话，下面是相关的标记：

<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

按钮和选项卡位于role hierarchy的不同部分

• 按钮是命令界面的一部分，
• 选项卡是sectionhead界面

的一部分