Por que labels importam

Uma legenda que ninguém clica

Olhe de novo para cada form que você construiu nos últimos dois cursos. Acima de cada input tem uma palavra: "Email", "Senha", "País". Para seus olhos, isso parece uma legenda no lugar certo. Para o mouse, é espaço morto; clicar ali não faz nada. Para um leitor de tela, nem é uma legenda, é só uma frase de texto boiando na página, sem nenhuma ligação anunciada com o input duas linhas abaixo.

Email
<input type="email" name="email">

Esse markup parece pronto, mas está quebrado. Usuários de mouse com visão encontram o input pela posição, então o buraco fica invisível para eles, e é por isso que sobrevive anos em produção. Quem paga o preço são as pessoas que não podem depender de posição: alguém usando leitor de tela, alguém com tremor que precisa de um alvo maior que uma caixa de 20px, alguém navegando a página só com o teclado.

O que um label de verdade te dá

A correção é um elemento só, <label>, e ele te dá duas coisas de uma vez:

• Um nome anunciado. O leitor de tela chega no input e lê "Email, campo de texto" em vez de só "campo de texto". O visitante sabe o que está preenchendo sem precisar adivinhar pelo contexto.
• Um alvo de clique maior. Clicar na palavra "Email" joga o foco para o campo. No celular, onde o dedo é mais largo que o texto, essa diferença decide se o form parece fácil ou irritante.

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

O mesmo resultado visual na tela. Um form completamente diferente por baixo: o navegador agora sabe que esses dois elementos são uma unidade só, e avisa isso a todo software que lê a página.

A armadilha do placeholder

Um atalho comum pula o <label> inteiramente e se apoia no placeholder:

<input type="email" name="email" placeholder="Email">

Parece um label. Se comporta como um por cerca de um segundo: no instante em que o visitante digita o primeiro caractere, o placeholder some, e a legenda desaparece junto. Volte para um form parcialmente preenchido mais tarde e o campo marcado "Email" agora é só uma caixa vazia sem memória do que estava pedindo. Texto de placeholder é uma dica sobre o formato esperado ("[email protected]"), não um substituto do nome do campo. Os dois resolvem problemas diferentes, e este curso é sobre o que o placeholder não resolve.

Onde isso se encaixa

Nada aqui muda o que é enviado. As regras de name e value dos últimos dois cursos continuam decidindo o que aparece em params. Labels são uma camada em cima dessa máquina, ligando uma legenda legível por humanos a um controle que já funciona. Você poderia enviar todo form deste curso sem um único <label> e o servidor receberia dados idênticos. A diferença mora inteiramente em quem consegue usar o form, e essa diferença é o assunto inteiro daqui em diante.

O que este curso cobre

• Aula 1, Por que labels importam: a diferença entre parecer rotulado e estar rotulado (você está aqui)
• Aula 2, Labels explícitos: a forma padrão de ligar um label ao seu controle com for e id
• Aula 3, Labels implícitos: colocar o controle dentro do label
• Aula 4, fieldset e legend: dando legenda a um grupo de controles
• Aula 5, aria-label e aria-labelledby: nomeando um controle quando não há espaço para texto visível
• Aula 6, aria-describedby: anexando dicas e mensagens de erro a um controle
• Aula 7, Juntando tudo: um form de cadastro construído com cada técnica deste curso

No final, todo input que você escrever vai anunciar seu propósito para o que estiver lendo a página, e todo grupo de controles relacionados vai carregar uma legenda que um leitor de tela consegue encontrar.