Os campos de entrada ARIA devem ter um nome acessível

Quando utiliza roles ARIA para criar controlos de entrada personalizados em vez de elementos HTML nativos, o navegador deixa de associar automaticamente um rótulo ao controlo. Os elementos nativos <input>, <select>, e <textarea> suportam o elemento <label> através de encapsulamento implícito ou emparelhamento explícito for/id, mas elementos personalizados <div> ou <span> com roles ARIA não. Isto significa que deve fornecer um nome acessível através de mecanismos específicos do ARIA.

Esta regra aplica-se a elementos com qualquer um dos seguintes roles ARIA de entrada:

• combobox
• listbox
• searchbox
• slider
• spinbutton
• textbox

Quem é afetado

Sem um nome acessível, os utilizadores que dependem de leitores de ecrã (incluindo utilizadores cegos e surdocegos) ouvem apenas o role do elemento — por exemplo, “textbox” — sem qualquer indicação sobre que informação inserir. Os utilizadores com deficiências motoras que navegam através de controlo por voz também dependem de nomes acessíveis para visar controlos específicos falando os seus rótulos. Isto cria uma barreira séria à interação.

Critérios de sucesso WCAG relacionados

Esta regra mapeia para WCAG 2.0, 2.1, e 2.2 Critério de Sucesso 4.1.2: Nome, Role, Valor (Nível A). Este critério exige que todos os componentes da interface do utilizador tenham um nome que possa ser determinado programaticamente pelas tecnologias assistivas. É um requisito de Nível A, significando que representa a linha de base mínima da acessibilidade.

Como corrigir o problema

Como os elementos <label> não funcionam de forma fiável com elementos não nativos como <div> ou <span>, precisa de utilizar uma destas abordagens:

1. aria-label — Adicione um rótulo conciso e descritivo diretamente no elemento.
2. aria-labelledby — Aponte para o id de um ou mais elementos visíveis que servem como rótulo.
3. title — Utilize o atributo title como último recurso (é menos detetável para utilizadores que veem).

Certifique-se de que o nome acessível que fornece não está vazio ou contém apenas espaços em branco, e que qualquer id referenciado por aria-labelledby existe realmente no DOM.

Erros comuns

• Definir aria-label com uma string vazia ou que contém apenas espaços em branco (por exemplo, aria-label=" ").
• Utilizar aria-labelledby com um id que não existe na página.
• Encapsular um widget ARIA personalizado num elemento <label>, que não fornece um nome programático para elementos não nativos na maioria das combinações navegador/leitor de ecrã.
• Utilizar <label for="id"> para apontar para um <div> — o atributo for apenas funciona com elementos rotuláveis nativos como <input>, <select>, e <textarea>.

Exemplos

Incorreto: sem nome acessível num combobox

O <div> tem um role combobox mas nenhum rótulo de qualquer tipo.

<div role="combobox">England</div>

Incorreto: aria-label contém apenas espaços em branco

Um aria-label vazio ou que contém apenas espaços em branco não conta como um nome acessível.

<div aria-label=" " role="combobox">England</div>

Incorreto: aria-labelledby referencia um id inexistente

O id referenciado deve existir no documento; caso contrário, o nome acessível resolve para vazio.

<div role="listbox" aria-labelledby="color-label">
  <div role="option">Orange</div>
</div>
<!-- Nenhum elemento com id="color-label" existe -->

Incorreto: <label> encapsulando um elemento não nativo

A associação implícita de rótulos não funciona para elementos <div> com roles ARIA.

<label>
  First name
  <div role="textbox"></div>
</label>

Incorreto: <label for> explícito visando um elemento não nativo

O atributo for apenas cria uma associação programática com elementos rotuláveis nativos.

<label for="name-field">First name</label>
<div role="textbox" id="name-field"></div>

Correto: aria-label num combobox

<div role="combobox" aria-label="Country">England</div>

Correto: aria-labelledby apontando para um rótulo visível

<p id="color-label">Select a color:</p>
<div role="listbox" aria-labelledby="color-label">
  <div role="option">Orange</div>
</div>

Correto: aria-labelledby num searchbox

<p id="search-label">Search currency pairs:</p>
<div role="searchbox"
  contenteditable="true"
  aria-labelledby="search-label"></div>

Correto: aria-label num slider

<div role="slider"
  aria-label="Choose a value"
  aria-valuemin="1"
  aria-valuemax="7"
  aria-valuenow="2"
  tabindex="0"></div>

Correto: aria-label num spinbutton

<div role="spinbutton"
  aria-label="Enter quantity"
  aria-valuemin="0"
  aria-valuemax="10"
  aria-valuenow="8"
  tabindex="0"></div>

Correto: aria-labelledby num textbox

<p id="name-label">First name</p>
<div role="textbox"
  contenteditable="true"
  aria-labelledby="name-label"></div>

Quando possível, prefira controlos de formulário HTML nativos (<input>, <select>, <textarea>) porque têm suporte integrado para rótulos e comportamento de teclado. Utilize roles ARIA de entrada personalizados apenas quando os elementos nativos não conseguem satisfazer os seus requisitos de design, e certifique-se sempre de que esses controlos personalizados têm um nome acessível.