Os atributos ARIA devem ser usados conforme especificado para o role 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 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 navegador, criando uma experiência confusa e pouco confiável.

Esta regra relaciona-se com o Critério de Sucesso 4.1.2 da WCAG 2.0/2.1/2.2: Nome, Role, Valor (Nível A), que requer que para todos os componentes da interface do utilizador, o nome, role 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 à árvore de acessibilidade do navegador através da propriedade checked. Quando você adiciona aria-checked por cima disto, cria duas fontes de verdade concorrentes. Se o estado nativo checked e o valor aria-checked ficarem dessincronizados — o que é fácil de acontecer — algumas tecnologias assistivas irão reportar 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 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, uma <div> ou <span>) que usa role="checkbox" junto com aria-checked. Ao fazer isto, também deve assegurar que o elemento é acessível por teclado (focável e alterá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 válidos apenas 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 expandibilidade — que são conceitos que só fazem sentido no contexto de um grid de árvore. Quando usados dentro de uma <table> simples ou grid, estes atributos não servem função alguma e podem fazer com que os leitores de ecrã anunciem informação confusa ou sem sentido.

Como corrigir

Ou remove os atributos não suportados das linhas, ou muda o role do contentor pai para treegrid se os dados realmente representam uma estrutura hierárquica e expandí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 um grid de árvore (navegação por setas para expandir/colapsar linhas).

Exemplos

Mau exemplo: 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">
  Concordo em tornar o meu website acessível
</label>

Bom exemplo: checkbox nativa sem aria-checked

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

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

Bom exemplo: checkbox personalizada usando aria-checked

Ao construir uma checkbox personalizada, aria-checked é apropriado porque não existe estado marcado 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>Os Meus Downloads</td>
  </tr>
  <tr aria-level="2">
    <td>Documentos</td>
  </tr>
</table>

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

Mudar o role 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>

Bom exemplo: remover atributos não suportados de uma tabela simples

Se os dados não são hierárquicos, simplesmente remove 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

→