Se utiliza el elemento <label> y en algunos casos otros mecanismos como WAI-ARIA, el atributo title, etc; para identificar cada uno de los controles del formulario
En las páginas web se proporcionan etiquetas para identificar todos los controles de formulario, los cuales incluyen campos de texto, campos de verificación, botones de opción y menús desplegables; para los cuales en la mayoría de los casos se usa el atributo <label>
Un etiqueta label y un control de formulario deben estar asociados entre sí de forma implícita o explicita. Lo cual permite que las tecnologías asistidas identifiquen el label correcto cuando se presenta un control de formulario.
Asociación de Labels de Forma Explicita
Siempre que sea posible, use el elemento label para asociar explícitamente textos con elementos del formulario. El atributo for de la etiqueta debe coincidir exactamente con el id del control de formulario
<label for="name"> Nombre:</label> <input type="text" name="name" id="name"><br> <input type="checkbox" name="recordar" id="recordar"> <label for="recordar">Recordar Nombre</label>
Un label ayuda a comprender mejor el propósito de un control de formulario; sin embargo en algunos casos el propósito de los controles de formulario es claro a plena vista por lo cual se puede ocultar el label, teniendo claro que aun así dentro del código debe proporcionarse para soportar otros tipos de interacción, como lectores de pantalla y entradas de voz.
A continuación se mostraran algunos ejemplos en los cuales los controles de formulario no necesitan que las etiquetas que lo precedan sean visibles:
<label for="busqueda" class="visuallyhidden">Busqueda: </label> <input type="text" name="busqueda" id="busqueda"> <button type="submit">Busqueda</button>
Usando el atributo aria-label.
<input type="text" name="busqueda" aria-label="Busqueda"> <button type="submit">Busqueda</button>
Usando el atributo title
<input title="Busqueda" type="text" name="busqueda"> <button type="submit">Busqueda</button>
Asociación de Labels de Forma Implícita
En Algunas ocasiones, los controles de formulario no pueden etiquetarse explícitamente, dado que es posible que un desarrollador no conozca el ID de un campo del formulario generado por un script o que el script no genere un ID. En estos casos se usa el elemento label como un contenedor para el control de formulario y el texto del label, de tal forma que los dos se asocian implícitamente.
<label> Nombre: <input type="text" name="nombre"> </label> <br> <label> <input type="checkbox" name="recordar"> Recordar Nombre </label>
Etiquetas Button
La etiqueta <button> puede ser utilizada de igual forma que la etiqueta <input>, sin embargo la etiqueta button permite más características de accesibilidad, como por ejemplo al traducir el idioma de la página.
<button type="submit">Submit</button> <button type="button">Cancel</button> <input type="submit" value="Submit"> <input type="button" value="Cancel">