Элементы кнопки в виде вкладок

Question

Можно ли использовать <button> элементы (а не привязки ссылок) в качестве вкладок?

Вот мой вариант использование ...

Я разметка набора вкладок с помощью кнопок элементов, и когда я пытаюсь присвоить им ARIA роли, я получаю эту ошибку проверки:

Похоже, что ARIA-роль tab не допускается к <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> 

Answer 1

Button и Tab находятся в разных частях role hierarchy:

• Кнопка является частью интерфейса командной

• Вкладка является частью интерфейса секционной головки