← Todas as regras

Formulários

Um campo, um rótulo

• Regra: form-field-multiple-labels
• Gravidade: Moderado
• Nível WCAG A

Por que isso importa

Quando vários <label> apontam para o mesmo campo, navegadores e leitores de tela discordam sobre qual anunciar: uns leem o primeiro, outros o último, outros juntam tudo.

Como corrigir

1. Unifique a redação em um único <label>.
2. Leve dicas e mensagens de erro para um elemento separado, referenciado por aria-describedby.
3. Deixe a marca de obrigatório dentro desse rótulo único, não em um segundo.

Na marcação

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

<label for="email">Email (required)</label>
<input id="email" required>

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:

• 3.3.2 Rótulos ou instruções (abre em nova aba) — Nível WCAG A

Para aprofundar

Deque University sobre form-field-multiple-labels (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.