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 tipográfico como aria-hiden em vez de aria-hidden, ou a um atributo fabricado como aria-visible que não existe na especificação — o browser não o reconhecerá. O atributo é efetivamente código morto, e a melhoria de acessibilidade que você pretendia nunca chega ao utilizador.

Isto é classificado como uma questão crítica porque as consequências podem ser graves. Por exemplo, se você escrever incorretamente 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 incorretamente aria-expanded num widget de divulgação, utilizadores cegos e surdocegos não saberão se uma secção está aberta ou fechada. Utilizadores que dependem apenas do teclado e que utilizam 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 da 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 nas WCAG 2.0, 2.1 e 2.2, bem como na EN 301 549 (diretriz 9.4.1.2).

Como corrigir

Audite os seus atributos ARIA. Reveja cada atributo no seu markup que comece com aria- e confirme que corresponde a um nome de atributo válido da especificação WAI-ARIA.
Verifique erros tipográficos. 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 de 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 utilizados 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 soltar: aria-dropeffect, aria-grabbed

Exemplos

Incorreto: atributo ARIA escrito incorretamente

<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/colapsado 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 tipográfico num atributo de relacionamento

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

O atributo aria-discribedby é uma grafia incorreta de aria-describedby. O input não será associado ao texto de ajuda para utilizadores de leitores de ecrã.

Correto: atributos ARIA escritos adequadamente

<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">Introduza o seu nome completo como aparece no seu documento de identificação.</p>

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

Learn more: