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

Quando você usa papéis ARIA para criar controlos de entrada personalizados em vez de elementos HTML nativos, o navegador deixa de associar automaticamente uma etiqueta com o controlo. Os elementos nativos <input>, <select>, e <textarea> suportam o elemento <label> através de envolvimento implícito ou emparelhamento explícito for/id, mas elementos <div> ou <span> personalizados com papéis 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 papéis 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 o papel do elemento — por exemplo, “textbox” — sem indicação de que informação inserir. Os utilizadores com limitações de mobilidade que navegam através de controlo por voz também dependem de nomes acessíveis para direcionar controlos específicos pronunciando as suas etiquetas. Isto cria uma barreira séria à interação.

Critérios de sucesso WCAG relacionados

Esta regra mapeia para o Critério de Sucesso 4.1.2 das WCAG 2.0, 2.1, e 2.2: Nome, Papel, Valor (Nível A). Este critério requer que todos os componentes de 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 corrigir o problema

Porque os elementos <label> não funcionam de forma fiável com elementos não-nativos como <div> ou <span>, você precisa de usar uma destas abordagens:

1. aria-label — Adicione uma etiqueta concisa e descritiva diretamente no elemento.
2. aria-labelledby — Aponte para o id de um ou mais elementos visíveis que servem como etiqueta.
3. title — Use o atributo title como último recurso (é menos detetável para utilizadores videntes).

Certifique-se de que o nome acessível que fornece não está vazio ou apenas com 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 apenas com espaços em branco (por exemplo, aria-label=" ").
• Usar aria-labelledby com um id que não existe na página.
• Envolver 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ã.
• Usar <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 papel combobox mas nenhuma etiqueta de qualquer tipo.

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

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

Um aria-label vazio ou apenas com 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>
<!-- Não existe nenhum elemento com id="color-label" -->

Incorreto: <label> envolvendo um elemento não-nativo

A associação de etiqueta implícita não funciona para elementos <div> com papéis 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 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 uma etiqueta 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 etiqueta e comportamento de teclado integrados. Use papéis de entrada ARIA 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.