← Todas as regras

Formulários

Campos de formulário precisam de rótulo

• Regra: label
• Gravidade: Crítico
• Nível WCAG A

Por que isso importa

Um campo sem rótulo é anunciado como “edição, vazio”. Dá para ouvir que existe um campo, mas não o que se espera nele — e a mensagem de erro no envio também não explicará.

Como corrigir

1. Acrescente um <label for="…"> cujo valor corresponda ao id do campo.
2. Se o design não tem espaço, use aria-label com a mesma redação do texto de exemplo.
3. Texto de exemplo não é rótulo: ele some na primeira tecla e costuma falhar no contraste.

Na marcação

<input type="email" id="email">

<label for="email">Email</label>
<input type="email" id="email">

A exigência por trás disso

Esta regra é uma das formas de falhar nos seguintes critérios de sucesso das WCAG 2.2. O W3C, que publica a norma, explica cada um deles:

• 4.1.2 Nome, função e valor (abre em nova aba) — Nível WCAG A

Para aprofundar

Deque University sobre label (abre em nova aba)

A Deque mantém o axe-core, o motor de código aberto que o nosso scanner executa. A página deles documenta a regra como o motor a implementa.

Verificações automáticas encontram falhas que o navegador consegue comprovar. Elas não julgam se uma legenda está correta, se um texto alternativo é útil, nem se a página pode ser operada de ponta a ponta pelo teclado — isso exige uma pessoa.