Una <label> le da a un control de formulario un nombre accesible y un área de clic más grande. Hay dos formas de asociarlos y hacerlo es esencial para la accesibilidad.
Método 1: for + id (explícito)
html
Email address
Una <label> le da a un control de formulario un nombre accesible y un área de clic más grande. Hay dos formas de asociarlos y hacerlo es esencial para la accesibilidad.
for + id (explícito)Email address
El for de la etiqueta coincide con el id de la entrada. Esto funciona incluso si no son adyacentes en el marcado.
<label>
Email address
<input type="email" />
</label>
La entrada está anidada dentro de la etiqueta — no se necesita id.
<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 -->
Un placeholder desaparece cuando el usuario escribe y no se anuncia de forma confiable — nunca lo uses como la única etiqueta.
<input type="search" aria-label="Search products" /> <!-- accessible name, no visible label -->
Usa aria-label (o aria-labelledby) solo cuando una etiqueta visible genuinamente no es posible.
Las etiquetas correctamente asociadas son una de las prácticas de accesibilidad más impactantes para formularios — le dan a cada control un nombre para la tecnología de asistencia y amplían las áreas de clic para todos.
Prefiere una <label> real; recurre a aria-label solo cuando sea necesario y nunca dependas de placeholder como etiqueta.