Os atributos ARIA obrigatórios devem ser fornecidos

Por que isto é um problema de acessibilidade

Os roles ARIA descrevem o que um elemento é e como se comporta. Muitos roles dependem de atributos específicos de estado ou propriedade para transmitir informações críticas sobre o elemento. Por exemplo, um role checkbox requer aria-checked para que os utilizadores saibam se a checkbox está selecionada. Sem ele, um utilizador de leitor de ecrã ouve “checkbox” mas não tem ideia se está marcada ou desmarcada.

Este problema afeta utilizadores que são cegos, surdocegos, ou têm deficiências de mobilidade e dependem de tecnologias assistivas para interagir com conteúdo web. Quando os atributos obrigatórios estão em falta, estes utilizadores perdem contexto essencial sobre o estado de widgets interativos.

Esta regra relaciona-se com o Critério de Sucesso 4.1.2 das WCAG 2.0, 2.1 e 2.2: Nome, Role, Valor (Nível A), que requer que para todos os componentes da interface do utilizador, o nome, role e estados possam ser determinados programaticamente. Atributos ARIA obrigatórios em falta violam diretamente este critério porque o estado do elemento não pode ser comunicado às tecnologias assistivas.

Como funcionam os atributos obrigatórios

Cada role ARIA tem um conjunto de estados e propriedades obrigatórios definidos na especificação WAI-ARIA. Estes atributos são essenciais para que o role funcione corretamente. Alguns exemplos comuns:

Alguns roles herdam requisitos de roles ancestrais. Quando um role herda de múltiplos ancestrais e um ancestral marca uma propriedade como suportada enquanto outro a marca como obrigatória, a propriedade torna-se obrigatória no role herdeiro.

Em alguns casos, valores padrão definidos na especificação satisfazem automaticamente o requisito, pelo que pode nem sempre precisar de definir explicitamente todos os atributos. No entanto, fornecer explicitamente atributos obrigatórios é a abordagem mais segura.

Como corrigir o problema

1. Identifique o role ARIA no elemento.
2. Consulte o role na documentação de Roles WAI-ARIA para encontrar os seus estados e propriedades obrigatórios.
3. Adicione quaisquer atributos obrigatórios em falta com valores apropriados.
4. Certifique-se de que os valores dos atributos são atualizados dinamicamente à medida que o estado do widget muda (por exemplo, alternar aria-checked entre true e false quando uma checkbox é clicada).

Em alternativa, considere se um elemento HTML nativo poderia substituir o widget ARIA personalizado. Elementos nativos como <input type="checkbox">, <input type="range">, e <select> gerem automaticamente o estado sem necessitar de atributos ARIA.

Exemplos

Incorreto: Checkbox sem aria-checked

<div role="checkbox" tabindex="0">
  Aceitar termos e condições
</div>

Um leitor de ecrã anuncia isto como uma checkbox, mas o utilizador não tem forma de saber se está marcada ou desmarcada.

Correto: Checkbox com aria-checked

<div role="checkbox" tabindex="0" aria-checked="false">
  Aceitar termos e condições
</div>

Melhor: Use uma checkbox HTML nativa

<label>
  <input type="checkbox">
  Aceitar termos e condições
</label>

Incorreto: Slider sem atributos de valor obrigatórios

<div role="slider" tabindex="0">
  Volume
</div>

Sem aria-valuenow, as tecnologias assistivas não conseguem reportar o valor atual do slider.

Correto: Slider com atributos obrigatórios

<div role="slider" tabindex="0"
  aria-valuenow="50"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-label="Volume">
</div>

Incorreto: Combobox sem aria-expanded e aria-controls

<input role="combobox" type="text" aria-label="Pesquisar">

Correto: Combobox com atributos obrigatórios

<input role="combobox" type="text"
  aria-label="Pesquisar"
  aria-expanded="false"
  aria-controls="search-listbox">
<ul id="search-listbox" role="listbox" hidden>
  <li role="option">Opção 1</li>
  <li role="option">Opção 2</li>
</ul>

Incorreto: Heading sem aria-level

<div role="heading">Título da Secção</div>

Correto: Heading com aria-level

<div role="heading" aria-level="2">Título da Secção</div>

Melhor: Use um elemento de cabeçalho nativo

<h2>Título da Secção</h2>

Learn more:

Deque Reference

Deque University - How To Fix

→

W3C Reference

W3C WAI ARIA 1.1 - Taxonomy of WAI-ARIA States and Properties

→