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 nos navegadores e tecnologias assistivas. Diferentes navegadores lidam com esses conflitos de forma inconsistente — alguns ignoram o atributo ARIA, outros sobrepõem o estado nativo, e outros ainda 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 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 do utilizador, o nome, papel e estados possam ser determinados programaticamente. Quando os atributos ARIA conflitam 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 adiciona aria-checked sobre isto, cria duas fontes de verdade concorrentes. Se o estado checked nativo 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 checked nativa. 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, um <div> ou <span>) que utiliza role="checkbox" juntamente com aria-checked. Ao fazer isto, deve também garantir que o elemento é acessível por teclado (focalizá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 em árvore. Quando utilizados dentro de uma <table> ou grid simples, estes atributos não servem função alguma e podem fazer com que os leitores de ecrã anunciem informações confusas ou sem sentido.

Como corrigir

Ou remove os atributos não suportados das linhas, ou muda o papel do contentor pai para treegrid se os dados representam verdadeiramente uma estrutura hierárquica 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/contrair linhas).

Exemplos

Exemplo incorreto: aria-checked numa caixa de seleção nativa

O atributo aria-checked conflita 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>

Exemplo correto: caixa de seleção nativa sem aria-checked

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

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

Exemplo correto: caixa de seleção personalizada utilizando aria-checked

Ao construir uma caixa de seleção personalizada, aria-checked é apropriado porque não existe 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>

Exemplo incorreto: 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 correto: 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 correto: 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>Os Meus Downloads</td>
  </tr>
  <tr>
    <td>Documentos</td>
  </tr>
</table>

Learn more:

Deque Reference

Deque University - How To Fix

→