Um <label> dá a um controle de formulário um nome acessível e um alvo de clique maior. Existem duas maneiras de associá-los, e fazer isso é essencial para acessibilidade.
Método 1: for + id (explícito)
html
Email address
Um <label> dá a um controle de formulário um nome acessível e um alvo de clique maior. Existem duas maneiras de associá-los, e fazer isso é essencial para acessibilidade.
for + id (explícito)Email address
O atributo for do rótulo corresponde ao id do input. Isso funciona mesmo que não sejam adjacentes na marcação.
<label>
Email address
<input type="email" />
</label>
O input é aninhado dentro do rótulo — nenhum id necessário.
<label><input type="checkbox" /> I agree to the terms</label>
<!-- clicking the text toggles the checkbox -->
<input placeholder="Email" /> <!-- ❌ disappears on typing, poor contrast, not a label -->
Um placeholder desaparece quando o usuário digita e não é anunciado de forma confiável — nunca o use como único rótulo.
<input type="search" aria-label="Search products" /> <!-- accessible name, no visible label -->
Use aria-label (ou aria-labelledby) apenas quando um rótulo visível genuinamente não for possível.
Rótulos devidamente associados são uma das práticas de acessibilidade mais impactantes para formulários — eles dão a cada controle um nome para tecnologia assistiva e ampliam os alvos de clique para todos.
Prefira um <label> real; recorra a aria-label apenas quando necessário, e nunca confie em placeholder como rótulo.