Regra de acessibilidade: Os atributos ARIA devem estar em conformidade com nomes válidos

Sobre esta regra de acessibilidade

Quando você adiciona um atributo ARIA a um elemento HTML, o browser expõe essa informação através da árvore de acessibilidade para que tecnologias assistivas como leitores de ecrã possam interpretá-la. Se o nome do atributo for inválido — seja devido a um erro de digitação como aria-hiden em vez de aria-hidden, ou um atributo inventado como aria-visible que não existe na especificação — o browser não o reconhecerá. O atributo torna-se efetivamente código morto, e a melhoria de acessibilidade que você pretendeu nunca chega ao utilizador.

Isto é classificado como um problema crítico porque as consequências podem ser graves. Por exemplo, se você escrever mal aria-required como aria-requried num campo de formulário, os utilizadores de leitores de ecrã não serão informados de que o campo é obrigatório. Se você escrever mal aria-expanded num widget de divulgação, os utilizadores cegos e surdocegos não saberão se uma secção está aberta ou fechada. Os utilizadores que usam apenas o teclado e dependem de leitores de ecrã também são afetados quando estados interativos e propriedades falham em comunicar corretamente.

Critérios de sucesso WCAG relacionados

Esta regra mapeia para o Critério de Sucesso WCAG 4.1.2: Nome, Função, Valor (Nível A), que exige que para todos os componentes de interface do utilizador, o nome, função e estados/propriedades possam ser determinados programaticamente. Atributos ARIA inválidos falham em comunicar estados e propriedades às tecnologias assistivas, violando diretamente este critério. Isto aplica-se às WCAG 2.0, 2.1 e 2.2, bem como à EN 301 549 (diretriz 9.4.1.2).

Como corrigir

Audite os seus atributos ARIA. Reveja cada atributo na sua marcação que comece com aria- e confirme que corresponde a um nome de atributo válido da especificação WAI-ARIA.
Verifique erros de digitação. Erros comuns incluem aria-labelled-by (correto: aria-labelledby), aria-hiden (correto: aria-hidden) e aria-discribedby (correto: aria-describedby).
Remova atributos inventados. Atributos como aria-visible, aria-tooltip ou aria-icon não existem na especificação WAI-ARIA e não terão qualquer efeito.
Use ferramentas. Extensões IDE, linters (como eslint-plugin-jsx-a11y) e a extensão de browser axe DevTools podem detetar nomes de atributos ARIA inválidos durante o desenvolvimento.

Atributos ARIA válidos comuns

Aqui estão alguns atributos ARIA frequentemente usados para referência:

Atributos de widget: aria-checked, aria-disabled, aria-expanded, aria-hidden, aria-label, aria-pressed, aria-readonly, aria-required, aria-selected, aria-valuenow
Atributos de região dinâmica: aria-live, aria-atomic, aria-relevant, aria-busy
Atributos de relacionamento: aria-labelledby, aria-describedby, aria-controls, aria-owns, aria-flowto
Atributos de arrastar e largar: aria-dropeffect, aria-grabbed

Exemplos

Incorreto: atributo ARIA mal escrito

<button aria-expandd="false">Mostrar detalhes</button>

O atributo aria-expandd não é um atributo ARIA válido. Os leitores de ecrã não anunciarão o estado expandido/contraído deste botão.

Incorreto: atributo ARIA inexistente

<div aria-visible="true">Anúncio importante</div>

O atributo aria-visible não existe na especificação WAI-ARIA. Será completamente ignorado pelas tecnologias assistivas.

Incorreto: erro de digitação num atributo de relacionamento

<input type="text" aria-discribedby="help-text">
<p id="help-text">Digite o seu nome completo conforme aparece no seu documento de identificação.</p>

O atributo aria-discribedby é um erro de escrita de aria-describedby. O input não será associado ao texto de ajuda para utilizadores de leitores de ecrã.

Correto: atributos ARIA corretamente escritos

<button aria-expanded="false">Mostrar detalhes</button>

<div aria-hidden="true">Conteúdo decorativo</div>

<input type="text" aria-describedby="help-text">
<p id="help-text">Digite o seu nome completo conforme aparece no seu documento de identificação.</p>

Cada um destes exemplos usa um atributo ARIA válido e corretamente escrito que os browsers e tecnologias assistivas reconhecerão e processarão conforme pretendido.

Learn more: