Etiquetas o instrucciones
Todo control de formulario que requiera entrada del usuario debe tener una etiqueta o instrucción que indique qué se debe introducir. Los campos con solo texto de marcador de posición, los campos con solo icono y los campos sin identificar no son suficientes.
Qué exige este criterio
Cuando se pide al usuario que introduzca datos — un campo de texto, una casilla de verificación, un botón de radio, una lista desplegable, un selector de fecha, un selector de archivos — debe existir una etiqueta o instrucción que indique qué se espera. La etiqueta puede ser texto visible, un elemento <label>, un aria-label o un aria-labelledby; las instrucciones pueden incluir el formato requerido, los valores permitidos o ejemplos.
Los campos obligatorios, los formatos esperados («DD/MM/AAAA») y las restricciones especiales («mínimo 8 caracteres, mayúsculas y minúsculas») quedan todos bajo el ámbito de este criterio.
Cómo cumplirlo
- Asociar cada
<input>,<textarea>y<select>a un elemento<label for="…">cuyo atributoforcoincida con eliddel control. - No utilizar el texto de marcador de posición (placeholder) como única etiqueta — los marcadores de posición desaparecen al activarse el campo y tienen un contraste bajo.
- Indicar los campos obligatorios de forma visible (asterisco, la palabra «obligatorio» o
aria-required="true") y explicar la convención al inicio del formulario. - Especificar el formato esperado de antemano, no después de que el usuario cometa un error: «Fecha (DD/MM/AAAA)» o «Número de teléfono, p. ej. 555-123-4567».
- Para grupos de casillas de verificación o botones de radio, utilizar
<fieldset>y<legend>para etiquetar el grupo. - Para entradas de solo icono o barras de filtro, usar
aria-labelpara proporcionar un nombre significativo.
Fallos habituales
- Formularios en los que el texto de marcador de posición es la única etiqueta, que desaparece en el momento en que el usuario empieza a escribir.
- Campos obligatorios marcados solo con asteriscos de color rojo sin asociación programática.
- Campos de fecha de nacimiento que esperan un formato concreto y solo lo informan al usuario cuando ya ha fallado la validación.
- Campos de búsqueda etiquetados con un icono de lupa y sin nombre accesible.
- Formularios de inicio de sesión en los que los campos de nombre de usuario y contraseña están posicionados visualmente junto a sus etiquetas, pero sin asociación programática entre ambos.
Por qué es importante
Los formularios son el punto de transacción principal entre usuarios y sitios web: registro, pago, contacto, soporte, citas. Los formularios sin etiquetas o con etiquetas insuficientes excluyen completamente a los usuarios de lectores de pantalla, que no pueden saber qué información se espera en cada campo. También perjudican a los usuarios con dislexia, quienes pierden el contexto en el momento en que desaparece el marcador de posición, y a los usuarios con discapacidad cognitiva, que se benefician de recibir las instrucciones de formato desde el principio.
Las etiquetas también son imprescindibles para los gestores de contraseñas, el autocompletado y el software de control por voz, todos los cuales utilizan el texto de las etiquetas para identificar los campos. Un formulario bien etiquetado mejora la experiencia de todos los usuarios.