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 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 papéis 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 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 deficiências motoras que navegam via controlo por voz também dependem de nomes acessíveis para direcionar controlos específicos falando as suas etiquetas. 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, Papel, 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, o que significa 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 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 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 realmente existe no DOM.

Erros comuns

• Definir aria-label para uma string vazia ou contendo apenas espaços em branco (por exemplo, aria-label=" ").
• Usar 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ã.
• Usar <label for="id"> para apontar para um <div> — o atributo for só funciona com elementos nativos rotulávies como <input>, <select>, e <textarea>.

Exemplos

Incorreto: nenhum 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 contém apenas espaços em branco

Um aria-label vazio ou contendo 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 não-existente

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 etiqueta 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 nativos rotulávies.

<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 integrado e comportamento de teclado. Use papéis de entrada ARIA personalizados apenas quando elementos nativos não conseguem atender aos seus requisitos de design, e certifique-se sempre de que esses controlos personalizados têm um nome acessível.