按钮元素作为选项卡

时间:2013-06-10 14:51:39

标签: html5 button tabs accessibility wai-aria

是否可以使用<button>元素(而不是锚链接)作为标签?

这是我的用例...

我正在使用按钮元素标记一组标签,当我尝试为它们分配ARIA角色时,我收到此验证错误:

enter image description here

tab元素上似乎不允许使用ARIA角色<button>。您是否有理由不将<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>

1 个答案:

答案 0 :(得分:1)

按钮和标签位于role hierarchy

的不同部分
  • 按钮是命令界面的一部分

  • Tab是sectionhead interface

  • 的一部分