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

Os atributos ARIA comunicam informações essenciais sobre o estado, propriedades e papéis dos elementos de interface às tecnologias assistivas como leitores de ecrã e displays 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 um destes cenários pode tornar o conteúdo inutilizável.

Este problema tem um impacto crítico nos utilizadores que são cegos, surdos-cegos ou têm deficiências de mobilidade que dependem de tecnologia assistiva para navegar e interagir com conteúdo web. Por exemplo, se uma checkbox usar aria-checked="ture" em vez de aria-checked="true", um leitor de ecrã não consegue determinar se a checkbox 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: Name, Role, Value (Nível A), que requer que para todos os componentes de interface do utilizador, o nome, papel 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 certos tipos de valores.
3. Faz sentido no contexto — o valor deve ser significativo para o papel e estado do elemento.

Compreender tipos de valores

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

• true/false — Valores booleanos. O padrão é tipicamente "false". Exemplo: aria-hidden="true".
• tristate — Aceita "true", "false" ou "mixed". Exemplo: aria-checked="mixed" para uma checkbox 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 fracional. 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 de quais valores cada atributo aceita, consulte o 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 apenas aceitam valores de string específicos.
• Referenciar IDs inexistentes — Se aria-labelledby aponta para um id que não existe no documento, a referência é inválida.
• Padrões implícitos — Alguns papéis alteram o valor padrão de certas propriedades. Por exemplo, aria-expanded num combobox tem o padrão "false" em vez de "undefined". Esteja ciente dos padrões específicos do papel.

Exemplos

Incorreto: valor booleano mal escrito

<div aria-hidden="flase">
  Este conteúdo deve estar visível para 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 corretamente escrito

<div aria-hidden="false">
  Este conteúdo está visível para 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 checkbox

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

O atributo aria-checked num papel checkbox apenas aceita "true", "false" ou "mixed". O valor "partial" não é reconhecido.

Correto: valor tristate válido numa checkbox

<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 apenas aceita "ascending", "descending", "none" ou "other".

Correto: valor válido para aria-sort

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

Incorreto: referência de ID inexistente

<input type="text" aria-labelledby="username-label">
<!-- Não existe nenhum elemento com id="username-label" no documento -->

Correto: referência de 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 que o valor de cada atributo está em conformidade com os valores permitidos definidos na especificação WAI-ARIA. Verifica a escrita correta, tokens válidos, tipos de valores adequados (booleano, inteiro, referência de ID, etc.) e assegura que os IDs referenciados existem no documento.