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

Quando você usa funções ARIA para criar controlos de entrada personalizados em vez de elementos HTML nativos, o navegador já não associa automaticamente um rótulo com o 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 <div> ou <span> personalizados com funções ARIA não. Isto significa que você deve fornecer um nome acessível através de mecanismos específicos do ARIA.

Esta regra aplica-se a elementos com qualquer uma das seguintes funções de entrada ARIA:

• 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 a função 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 direcionar 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 o WCAG 2.0, 2.1, e 2.2 Critério de Sucesso 4.1.2: Nome, Função, Valor (Nível A). Este critério requer 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 de acessibilidade.

Como resolver o problema

Como os elementos <label> não funcionam de forma confiável com elementos não nativos como <div> ou <span>, você precisa usar 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 — Use o atributo title como último recurso (é menos descobrível para utilizadores videntes).

Certifique-se de que o nome acessível que você 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 como uma string vazia ou com apenas espaços em branco (ex., aria-label=" ").
• Usar aria-labelledby com um id que não existe na página.
• Encapsular um widget ARIA personalizado num elemento <label>, o que não fornece um nome programático para elementos não nativos na maioria das combinações de navegador/leitor de ecrã.
• Usar <label for="id"> para apontar para um <div> — o atributo for apenas funciona com elementos nativos rotulá​veis como <input>, <select>, e <textarea>.

Exemplos

Incorreto: sem nome acessível num combobox

O <div> tem uma função 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 com 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-se como 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ótulo não funciona para elementos <div> com funções ARIA.

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

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

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

<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 de rótulo incorporado e comportamento de teclado. Use funções de entrada ARIA personalizadas apenas quando 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.