Os atributos ARIA devem ser usados conforme especificado para o papel do elemento

Quando os atributos ARIA são aplicados a elementos onde a especificação diz que não devem ser usados, o resultado é um comportamento imprevisível entre navegadores e tecnologias assistivas. Diferentes navegadores lidam com estes conflitos de forma inconsistente — alguns ignoram o atributo ARIA, outros sobrepõem o estado nativo, e ainda outros passam ambos os valores. Esta inconsistência significa que um utilizador de leitor de ecrã num navegador pode ouvir um estado completamente diferente de um utilizador de leitor de ecrã noutro, criando uma experiência confusa e pouco fiável.

Esta regra relaciona-se com WCAG 2.0/2.1/2.2 Critério de Sucesso 4.1.2: Nome, Papel, Valor (Nível A), que exige que para todos os componentes da interface do utilizador, o nome, papel e estados possam ser determinados programaticamente. Quando os atributos ARIA entram em conflito com a semântica nativa ou são usados fora do seu contexto permitido, o estado determinado programaticamente torna-se ambíguo ou incorreto. Os utilizadores afetados incluem pessoas cegas ou surdocegas que dependem de leitores de ecrã, bem como pessoas com deficiências motoras que usam dispositivos de entrada alternativos que dependem de informação ARIA precisa.

Existem dois cenários principais que esta regra verifica:

O atributo aria-checked em checkboxes nativas

O atributo aria-checked não deve ser usado num elemento <input type="checkbox">. As checkboxes HTML nativas já comunicam o seu estado marcado para a árvore de acessibilidade do navegador através da propriedade checked. Quando adiciona aria-checked por cima disto, cria duas fontes de verdade em competição. Se o estado nativo checked e o valor aria-checked ficarem dessincronizados — o que é fácil de acontecer — algumas tecnologias assistivas reportarão o estado nativo enquanto outras reportam o estado ARIA. O utilizador não tem forma de saber qual está correto.

Como corrigir

Tem duas opções:

1. Remover aria-checked e confiar no atributo ou propriedade nativa checked. Se precisar de um estado “misto” ou indeterminado, defina a propriedade indeterminate na checkbox via JavaScript.
2. Substituir a checkbox nativa por um elemento personalizado (por exemplo, um <div> ou <span>) que use role="checkbox" junto com aria-checked. Ao fazer isto, também deve garantir que o elemento é acessível por teclado (focável e alternável com Espaço) e tem um nome acessível.

Atributos específicos de linha fora de um treegrid

Os atributos aria-posinset, aria-setsize, aria-expanded e aria-level são apenas válidos numa linha (um elemento <tr> ou um elemento com role="row") quando essa linha está dentro de um treegrid. Estes atributos descrevem relações hierárquicas de árvore — posição dentro de um conjunto, nível de aninhamento e capacidade de expansão — que são conceitos que só fazem sentido num contexto de grelha de árvore. Quando usados dentro de uma <table> simples ou grid, estes atributos não servem função alguma e podem causar aos leitores de ecrã o anúncio de informação confusa ou sem sentido.

Como corrigir

Remova os atributos não suportados das linhas, ou mude o papel do contentor pai para treegrid se os dados realmente representam uma estrutura hierárquica e expansível. Se mudar para treegrid, certifique-se de que as células usam role="gridcell" e que o padrão de interação por teclado corresponde ao que os utilizadores esperam de uma grelha de árvore (navegação por setas para expandir/recolher linhas).

Exemplos

Exemplo mau: aria-checked numa checkbox nativa

O atributo aria-checked entra em conflito com o estado nativo da checkbox.

<label>
  <input type="checkbox" aria-checked="true">
  Aceito tornar o meu site acessível
</label>

Exemplo bom: checkbox nativa sem aria-checked

O navegador comunica o estado marcado nativamente — não é necessária sobreposição ARIA.

<label>
  <input type="checkbox" checked>
  Aceito tornar o meu site acessível
</label>

Exemplo bom: checkbox personalizada usando aria-checked

Ao construir uma checkbox personalizada, aria-checked é apropriado porque não há estado marcado nativo.

<div role="checkbox" aria-checked="true" tabindex="0" aria-label="Aceito tornar o meu site acessível">
  ✓ Aceito tornar o meu site acessível
</div>

Exemplo mau: atributos de árvore em linhas dentro de uma tabela simples

Os atributos aria-level e aria-expanded não são válidos em linhas dentro de uma <table>.

<table>
  <tr aria-level="1" aria-expanded="false">
    <td>Os Meus Downloads</td>
  </tr>
  <tr aria-level="2">
    <td>Documentos</td>
  </tr>
</table>

Exemplo bom: atributos de árvore em linhas dentro de um treegrid

Mudar o papel da tabela para treegrid torna estes atributos válidos e significativos.

<table role="treegrid">
  <tr aria-level="1" aria-expanded="false">
    <td role="gridcell">Os Meus Downloads</td>
  </tr>
  <tr aria-level="2" class="hidden">
    <td role="gridcell">Documentos</td>
  </tr>
</table>

Exemplo bom: remover atributos não suportados de uma tabela simples

Se os dados não são hierárquicos, simplesmente remova os atributos relacionados com árvore.

<table>
  <tr>
    <td>Os Meus Downloads</td>
  </tr>
  <tr>
    <td>Documentos</td>
  </tr>
</table>

Learn more:

Deque Reference

Deque University - How To Fix

→