Os elementos do formulário não têm rótulos associados

Os rótulos garantem que os controles de formulário sejam anunciados adequadamente por tecnologias assistivas, como leitores de tela. Os usuários de tecnologia assistiva contam com esses rótulos para navegar nos formulários. Os usuários de mouse e tela sensível ao toque também podem se beneficiar dos rótulos porque o texto do rótulo cria um ponto de clique maior.

Como esta auditoria Lighthouse falha #

Os sinalizadores do Lighthouse formam elementos que não têm rótulos associados:

Como adicionar rótulos aos elementos do formulário #

Existem duas maneiras de associar um rótulo a um elemento de formulário. Coloque o elemento de entrada dentro de um elemento de rótulo:

<label>
  Receber ofertas promocionais?
  <input type="checkbox">
</label>

Ou use o rótulo for atributo e consulte o ID do elemento:

<input id="promo" type="checkbox">
<label for="promo">Receber ofertas promocionais?</label>

Quando a caixa de seleção é marcada corretamente, as tecnologias assistivas relatam que o elemento tem uma função de caixa de seleção está em um estado marcado e é denominado "Receber ofertas promocionais?" Consulte também Rotular elementos de formulário .

Recursos #

• O código-fonte para a auditoria elementos de formulário não tem rótulos associados
• Os elementos do formulário <input> devem ter rótulos (Deque University)