← Todas as regras

ARIA

Abas precisam de nome

• Regra: aria-tab-name
• Gravidade: Grave
• Nível WCAG A

Por que isso importa

Uma aba sem nome acessível é anunciada como “aba, 2 de 4”, sem indicar o que ela abre — o que torna o conjunto de abas inutilizável sem visão.

Como corrigir

1. Coloque o rótulo da aba como texto dentro do elemento.
2. Em abas só de ícone, acrescente aria-label com a mesma palavra que a dica de tela mostra.
3. Garanta que o ícone esteja com aria-hidden para não atrapalhar o nome.

Na marcação

<button role="tab"><svg aria-hidden="true">...</svg></button>

<button role="tab" aria-label="Settings">
  <svg aria-hidden="true">...</svg>
</button>

A exigência por trás disso

Esta regra é uma das formas de falhar nos seguintes critérios de sucesso das WCAG 2.2. O W3C, que publica a norma, explica cada um deles:

• 4.1.2 Nome, função e valor (abre em nova aba) — Nível WCAG A

Para aprofundar

Deque University sobre aria-tab-name (abre em nova aba)

A Deque mantém o axe-core, o motor de código aberto que o nosso scanner executa. A página deles documenta a regra como o motor a implementa.

Verificações automáticas encontram falhas que o navegador consegue comprovar. Elas não julgam se uma legenda está correta, se um texto alternativo é útil, nem se a página pode ser operada de ponta a ponta pelo teclado — isso exige uma pessoa.