Os elementos devem usar apenas atributos ARIA permitidos

A especificação WAI-ARIA define quais atributos são permitidos, obrigatórios ou proibidos para cada role. Quando você usa um atributo proibido num role, está a confiar numa combinação que as tecnologias assistivas não foram desenhadas para suportar. O resultado é que a informação que pretendia comunicar — como uma etiqueta ou descrição — pode ser silenciosamente descartada.

Isto cria um problema grave para utilizadores que dependem de tecnologias assistivas, incluindo pessoas cegas, surdocegas ou com deficiências motoras. Os leitores de ecrã podem ignorar o atributo proibido, deixando o utilizador sem contexto. Algumas tecnologias assistivas podem tentar compensar, levando a comportamentos inconsistentes ou confusos em diferentes ferramentas e navegadores.

Um exemplo comum é usar aria-label num elemento com role="presentation" ou role="none". Estes roles dizem explicitamente às tecnologias assistivas para ignorarem a semântica do elemento, por isso rotulá-lo com aria-label é contraditório. Da mesma forma, roles semânticos de nível de texto como code, insertion, deletion, strong, emphasis, subscript, superscript e paragraph proíbem aria-label e aria-labelledby porque estes roles representam conteúdo de texto em linha que não deve ter um nome acessível separado do seu conteúdo de texto.

Critérios de sucesso WCAG relacionados

Esta regra relaciona-se com o Critério de Sucesso WCAG 4.1.2: Nome, Role, Valor (Nível A), que exige que para todos os componentes da interface do utilizador, o nome, role e estados/propriedades possam ser determinados programaticamente. Usar atributos ARIA proibidos viola este critério porque a informação pretendida de nome ou estado não pode ser comunicada de forma fiável às tecnologias assistivas.

Como corrigir

Quando o axe sinaliza um atributo ARIA proibido, considere estas abordagens:

1. Remova o atributo proibido — Se a informação que transmite não é essencial, simplesmente remova-o.
2. Altere o role do elemento — Mude para um role que permita o atributo de que necessita. Por exemplo, se precisar de aria-label, não use role="none".
3. Forneça a informação como texto visível — Em vez de confiar no atributo proibido, inclua a informação diretamente no conteúdo da página onde todos os utilizadores a possam aceder.
4. Mova o atributo para um elemento diferente — Coloque o atributo num elemento pai ou filho que tenha um role que o suporte.

Exemplos

Incorreto: aria-label num elemento com role="presentation"

O role presentation diz às tecnologias assistivas para ignorarem o elemento. Adicionar aria-label contradiz isto e será ignorado.

<div role="presentation" aria-label="Navigation section">
  <a href="/home">Home</a>
  <a href="/about">About</a>
</div>

Correto: Use um role que suporte aria-label

Se o elemento precisar de um nome acessível, use um role que permita rotulagem, como navigation.

<nav aria-label="Navigation section">
  <a href="/home">Home</a>
  <a href="/about">About</a>
</nav>

Incorreto: aria-label num role semântico de nível de texto

Roles como code, strong, emphasis, insertion e deletion proíbem aria-label e aria-labelledby.

<span role="code" aria-label="JavaScript variable declaration">
  const x = 10;
</span>

Correto: Use texto visível em vez disso

Forneça contexto através do conteúdo de texto envolvente em vez de um atributo proibido.

<p>
  A seguinte declaração de variável JavaScript
  <code>const x = 10;</code>
  atribui o valor 10 a x.
</p>

Incorreto: aria-labelledby em role="none"

<h2 id="section-title">Features</h2>
<table role="none" aria-labelledby="section-title">
  <tr>
    <td>Fast</td>
    <td>Reliable</td>
  </tr>
</table>

Correto: Remova o role conflituoso ou o atributo proibido

Se a tabela precisar de ser rotulada, remova role="none" para que mantenha a sua semântica nativa de tabela.

<h2 id="section-title">Features</h2>
<table aria-labelledby="section-title">
  <tr>
    <td>Fast</td>
    <td>Reliable</td>
  </tr>
</table>

Se a tabela é verdadeiramente presentacional e não precisa de uma etiqueta, remova o atributo aria-labelledby em vez disso.

<table role="none">
  <tr>
    <td>Fast</td>
    <td>Reliable</td>
  </tr>
</table>

Learn more:

Deque Reference

Deque University - How To Fix

→

W3C Reference

W3C: ARIA in HTML

→

W3C Reference

WAI-ARIA Overview

→

W3C Reference

WAI-ARIA 1.1

→