Os atributos ARIA devem ser utilizados 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 utilizados, o resultado é um comportamento imprevisível entre navegadores e tecnologias assistivas. Diferentes navegadores lidam com esses conflitos de forma inconsistente — alguns ignoram o atributo ARIA, outros sobrescrevem 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 navegador, criando uma experiência confusa e pouco confiável.

Esta regra relaciona-se com o Critério de Sucesso 4.1.2 das WCAG 2.0/2.1/2.2: Nome, Papel, Valor (Nível A), que exige que para todos os componentes da interface de 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 utilizados 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 utilizam dispositivos de entrada alternativos que dependem de informações ARIA precisas.

Existem dois cenários principais que esta regra verifica:

O atributo aria-checked em caixas de seleção nativas

O atributo aria-checked não deve ser utilizado num elemento <input type="checkbox">. As caixas de seleção HTML nativas já comunicam o seu estado selecionado à árvore de acessibilidade do navegador através da propriedade checked. Quando você adiciona aria-checked por cima disso, 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

Você tem duas opções:

1. Remover aria-checked e depender do atributo ou propriedade nativo checked. Se precisar de um estado “misto” ou indeterminado, defina a propriedade indeterminate na caixa de seleção via JavaScript.
2. Substituir a caixa de seleção nativa por um elemento personalizado (por exemplo, uma <div> ou <span>) que utilize role="checkbox" juntamente com aria-checked. Ao fazer isto, deve também assegurar que o elemento é acessível por teclado (focalizável e comutável com Espaço) e tem um nome acessível.

Atributos específicos de linhas fora de um treegrid

Os atributos aria-posinset, aria-setsize, aria-expanded e aria-level só são 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 expansibilidade — que são conceitos que só fazem sentido num contexto de grelha em árvore. Quando utilizados dentro de uma <table> simples ou grid, estes atributos não servem nenhuma função e podem fazer com que os leitores de ecrã anunciem informações confusas ou sem sentido.

Como corrigir

Remova os atributos não suportados das linhas, ou altere 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 utilizam role="gridcell" e que o padrão de interação por teclado corresponde ao que os utilizadores esperam de uma grelha em árvore (navegação por setas para expandir/colapsar linhas).

Exemplos

Mau exemplo: aria-checked numa caixa de seleção nativa

O atributo aria-checked entra em conflito com o estado da caixa de seleção nativa.

<label>
  <input type="checkbox" aria-checked="true">
  Concordo em tornar o meu website acessível
</label>

Bom exemplo: caixa de seleção nativa sem aria-checked

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

<label>
  <input type="checkbox" checked>
  Concordo em tornar o meu website acessível
</label>

Bom exemplo: caixa de seleção personalizada utilizando aria-checked

Ao construir uma caixa de seleção personalizada, aria-checked é apropriado porque não há estado selecionado nativo.

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

Mau exemplo: 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>As Minhas Transferências</td>
  </tr>
  <tr aria-level="2">
    <td>Documentos</td>
  </tr>
</table>

Bom exemplo: atributos de árvore em linhas dentro de um treegrid

Alterar 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">As Minhas Transferências</td>
  </tr>
  <tr aria-level="2" class="hidden">
    <td role="gridcell">Documentos</td>
  </tr>
</table>

Bom exemplo: remoção de 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>As Minhas Transferências</td>
  </tr>
  <tr>
    <td>Documentos</td>
  </tr>
</table>

Learn more:

Deque Reference

Deque University - How To Fix

→