Os atributos ARIA devem estar em conformidade com valores válidos

Os atributos ARIA comunicam informações essenciais sobre o estado, propriedades e funções dos elementos da interface às tecnologias assistivas como leitores de ecrã e monitores braille. Quando estes atributos contêm valores inválidos, a comunicação falha completamente. Um leitor de ecrã pode ignorar o atributo, representar incorretamente o estado do elemento ou comportar-se de forma imprevisível — qualquer uma destas situações pode tornar o conteúdo inutilizável.

Este problema tem um impacto crítico nos utilizadores que são cegos, surdocegos ou têm deficiências de mobilidade e que dependem de tecnologia assistiva para navegar e interagir com conteúdo web. Por exemplo, se uma caixa de seleção usar aria-checked="ture" em vez de aria-checked="true", um leitor de ecrã não consegue determinar se a caixa de seleção está marcada, deixando o utilizador incapaz de compreender o estado atual do formulário.

Esta regra corresponde ao WCAG 2.0, 2.1 e 2.2 Critério de Sucesso 4.1.2: Nome, Função, Valor (Nível A), que exige que para todos os componentes da interface de utilizador, o nome, função e valor possam ser determinados programaticamente e definidos pelas tecnologias assistivas. Valores ARIA inválidos violam este critério porque o valor não pode ser determinado de forma significativa.

Como corrigir

Para cada atributo aria- na sua marcação, confirme que o seu valor:

1. Está escrito corretamente — um erro tipográfico como "flase" em vez de "false" causará uma falha.
2. É um valor permitido para esse atributo específico — cada atributo ARIA aceita apenas determinados tipos de valores.
3. Faz sentido no contexto — o valor deve ser significativo para a função e estado do elemento.

Compreender os tipos de valores

Diferentes atributos ARIA aceitam diferentes tipos de valores. Aqui estão os mais comuns:

• true/false — Valores booleanos. O padrão é normalmente "false". Exemplo: aria-hidden="true".
• tristate — Aceita "true", "false" ou "mixed". Exemplo: aria-checked="mixed" para uma caixa de seleção parcialmente selecionada.
• true/false/undefined — Como true/false, mas "undefined" indica explicitamente que a propriedade não é relevante.
• token — Um valor de um conjunto limitado de strings permitidas. Exemplo: aria-sort aceita "ascending", "descending", "none" ou "other".
• token list — Uma lista separada por espaços de um ou mais tokens permitidos. Exemplo: aria-relevant="additions text".
• ID reference — O id de outro elemento no mesmo documento. Exemplo: aria-labelledby="heading-1".
• ID reference list — Uma lista separada por espaços de IDs de elementos. Exemplo: aria-describedby="desc1 desc2".
• integer — Um número inteiro sem parte fracionária. Exemplo: aria-level="2".
• number — Qualquer número real. Exemplo: aria-valuenow="3.5".
• string — Um valor de texto sem restrições. Exemplo: aria-label="Close dialog".

Para uma referência completa sobre quais valores cada atributo aceita, consulte WAI-ARIA 1.1 Supported States and Properties.

Cuidado com armadilhas comuns

• Erros tipográficos em valores booleanos — "ture", "flase", "yes" e "no" são todos inválidos para atributos que esperam "true" ou "false".
• Usar tokens errados — Atributos como aria-sort, aria-autocomplete e aria-current só aceitam valores de string específicos.
• Referenciar IDs inexistentes — Se aria-labelledby apontar para um id que não existe no documento, a referência é inválida.
• Padrões implícitos — Algumas funções alteram o valor padrão de certas propriedades. Por exemplo, aria-expanded num combobox tem como padrão "false" em vez de "undefined". Esteja atento aos padrões específicos da função.

Exemplos

Incorreto: Valor booleano mal escrito

<div aria-hidden="flase">
  Este conteúdo deveria ser visível para a tecnologia assistiva.
</div>

O valor "flase" não é um booleano válido. As tecnologias assistivas podem não conseguir interpretar o estado pretendido.

Correto: Valor booleano escrito adequadamente

<div aria-hidden="false">
  Este conteúdo é visível para a tecnologia assistiva.
</div>

Incorreto: Valor de token inválido

<button aria-pressed="yes">
  Negrito
</button>

O atributo aria-pressed aceita "true", "false" ou "mixed" — não "yes".

Correto: Valor de token válido

<button aria-pressed="true">
  Negrito
</button>

Incorreto: Valor tristate inválido numa caixa de seleção

<div role="checkbox" aria-checked="partial" tabindex="0">
  Selecionar todos os itens
</div>

O atributo aria-checked numa função checkbox só aceita "true", "false" ou "mixed". O valor "partial" não é reconhecido.

Correto: Valor tristate válido numa caixa de seleção

<div role="checkbox" aria-checked="mixed" tabindex="0">
  Selecionar todos os itens
</div>

Incorreto: Valor inválido para aria-sort

<th aria-sort="alphabetical">Nome</th>

O atributo aria-sort só aceita "ascending", "descending", "none" ou "other".

Correto: Valor válido para aria-sort

<th aria-sort="ascending">Nome</th>

Incorreto: Referência a ID inexistente

<input type="text" aria-labelledby="username-label">
<!-- Nenhum elemento com id="username-label" existe no documento -->

Correto: Referência a ID válida

<label id="username-label">Nome de utilizador</label>
<input type="text" aria-labelledby="username-label">

O que esta regra verifica

A regra aria-valid-attr-value inspeciona cada elemento que tem um ou mais atributos aria- e verifica se o valor de cada atributo está em conformidade com os valores permitidos definidos na especificação WAI-ARIA. Verifica a ortografia correta, tokens válidos, tipos de valores adequados (booleano, inteiro, referência de ID, etc.) e assegura que os IDs referenciados existem no documento.