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 isto, 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 motoras 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 dos widgets interativos.

Esta regra relaciona-se com o WCAG 2.0, 2.1, e 2.2 Critério de Sucesso 4.1.2: Nome, Role, Valor (Nível A), que exige que para todos os componentes de 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 que herda.

Em alguns casos, valores padrão definidos na especificação satisfazem o requisito automaticamente, 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. Procure 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 conforme o estado do widget muda (por exemplo, alternando 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 precisar de atributos ARIA.

Exemplos

Incorreto: Checkbox sem aria-checked

<div role="checkbox" tabindex="0">
  Accept terms and conditions
</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">
  Accept terms and conditions
</div>

Melhor: Use uma checkbox HTML nativa

<label>
  <input type="checkbox">
  Accept terms and conditions
</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="Search">

Correto: Combobox com atributos obrigatórios

<input role="combobox" type="text"
  aria-label="Search"
  aria-expanded="false"
  aria-controls="search-listbox">
<ul id="search-listbox" role="listbox" hidden>
  <li role="option">Option 1</li>
  <li role="option">Option 2</li>
</ul>

Incorreto: Heading sem aria-level

<div role="heading">Section Title</div>

Correto: Heading com aria-level

<div role="heading" aria-level="2">Section Title</div>

Melhor: Use um elemento heading nativo

<h2>Section Title</h2>

Learn more:

Deque Reference

Deque University - How To Fix

→

W3C Reference

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

→