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 navegador expõe essa informação através da árvore de acessibilidade para que tecnologias de apoio 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 navegador 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 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, utilizadores cegos e surdocegos não saberão se uma secção está aberta ou fechada. Utilizadores que usam apenas o teclado e dependem de leitores de ecrã também são afetados quando estados e propriedades interativos falham em comunicar corretamente.

Critérios de sucesso WCAG relacionados

Esta regra mapeia para o Critério de Sucesso WCAG 4.1.2: Nome, Papel, Valor (Nível A), que exige que para todos os componentes da interface do utilizador, o nome, papel, e estados/propriedades possam ser determinados programaticamente. Atributos ARIA inválidos falham em comunicar estados e propriedades às tecnologias de apoio, 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 todos os atributos na sua marcação que começam com aria- e confirme que correspondem 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 de IDE, linters (como eslint-plugin-jsx-a11y), e a extensão de navegador 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/recolhido 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 de apoio.

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

<input type="text" aria-discribedby="help-text">
<p id="help-text">Insira 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 corretamente

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

Cada um destes exemplos usa um atributo ARIA válido e corretamente escrito que navegadores e tecnologias de apoio reconhecerão e processarão conforme pretendido.

Learn more: