La respuesta corta
Da a cada campo una etiqueta visible vinculada con for e id, indica en texto los campos obligatorios, agrupa las opciones relacionadas con fieldset y legend, muestra los errores con palabras junto al campo y en un resumen, usa los tipos de campo correctos y el autocompletado, y asegúrate de que todo el formulario funcione con el teclado.
Puntos clave
- Cada campo necesita una etiqueta real y visible, no solo un texto de ejemplo.
- Escribe «obligatorio» en texto, no solo con un asterisco rojo.
- Los mensajes de error explican cómo resolver el problema.
- Usa el autocompletado para que nadie tenga que escribir los mismos datos dos veces.
- No dependas de arrastrar y soltar ni de acertijos para demostrar que alguien es humano.
El informe WebAIM Million 2026 encontró etiquetas de formulario ausentes en el 51 % del millón de páginas de inicio más visitadas. Sin etiqueta, un lector de pantalla solo dice «texto editable» y la persona tiene que adivinar. Cada intento es una oportunidad de perder una venta o un cliente potencial.
La corrección, paso a paso
-
Etiqueta cada campo
Usa
<label for="correo">Correo</label>con<input id="correo">. Al hacer clic en la etiqueta, el cursor debe ir al campo. -
Marca claramente los campos obligatorios
Escribe «(obligatorio)» en la etiqueta o explica el asterisco al principio del formulario. Añade el atributo required.
-
Agrupa las opciones relacionadas
Envuelve los botones de opción y los grupos de casillas en un fieldset con una legend, como «Forma de contacto preferida».
-
Usa los tipos correctos
type=”email”, type=”tel” e inputmode muestran el teclado adecuado en el teléfono. Añade autocomplete=”email”, “name”, “postal-code” y otros.
-
Escribe errores útiles
Muestra el error junto al campo, en texto («Escribe una fecha como 2026-03-15»), enlázalo desde un resumen al principio y conéctalo con aria-describedby.
-
Pruébalo
Rellena el formulario solo con el teclado, luego con un lector de pantalla, y después comete un error a propósito para ver si el mensaje ayuda.
Un texto de ejemplo no es una etiqueta
El texto de ejemplo desaparece en cuanto alguien escribe, suele tener poco contraste y no todas las tecnologías de apoyo lo leen de forma fiable. Mantén una etiqueta visible encima del campo. Usa el texto de ejemplo solo para mostrar un formato, si hace falta.
Errores que ayudan
«Entrada no válida» no ayuda a nadie. Di qué falló y cómo arreglarlo: «El teléfono debe tener 10 dígitos, como 514 555 0199». No uses solo el color; añade un icono o la palabra «Error». Cuando el envío falle, mueve el foco a un resumen al principio que liste cada problema como enlace al campo.
Nuevas reglas de WCAG 2.2 para formularios
- Entrada redundante (3.3.7): no pidas a las personas que escriban los mismos datos dos veces en un mismo proceso. Ofrece «igual que la dirección de facturación».
- Autenticación accesible (3.3.8): no obligues a resolver un acertijo ni a recordar un código para iniciar sesión. Permite los gestores de contraseñas y pegar.
- Tamaño del objetivo (2.5.8): los botones y casillas deben medir al menos 24 por 24 píxeles, o estar lo bastante separados para tocarlos con facilidad.
Consulta la lista completa en WCAG 2.2 explicado con palabras sencillas.
Plugins de formulario de contacto
La mayoría de los plugins de formularios populares para WordPress pueden generar un código accesible, pero los ajustes importan. Activa las etiquetas (no solo los textos de ejemplo), elige mensajes de error en línea y evita los CAPTCHA de imágenes. Después de cambiar los ajustes, ejecuta un análisis: Accessible Nord marca los campos sin etiqueta en cada página que revisa.
Fuentes
La mayoría de las fuentes son documentos oficiales en inglés.
- The WebAIM Million, 2026 report
- W3C WAI: Forms tutorial
- Understanding WCAG 2.2: Redundant Entry (3.3.7)
- Understanding WCAG 2.2: Accessible Authentication (Minimum) (3.3.8)
Última revisión: .
Preguntas frecuentes
¿Puedo ocultar las etiquetas visualmente?
Puedes usar una etiqueta oculta visualmente en casos sencillos, como un único campo de búsqueda con un botón de búsqueda claro. En la mayoría de los formularios, las etiquetas visibles ayudan a todos, incluidas las personas con dificultades de memoria o atención.
¿Un CAPTCHA es accesible?
Los CAPTCHA de imágenes y acertijos bloquean a muchas personas. Usa comprobaciones invisibles como un campo trampa, límites de frecuencia o un desafío moderno que no pida resolver una tarea.
¿Debo validar mientras la persona escribe?
Valida cuando la persona sale de un campo o envía el formulario, no con cada tecla, porque puede resultar molesto para quienes usan lectores de pantalla.
Esta guía es información general, no asesoría legal. Para tus obligaciones concretas, consulta con un abogado o con tu regulador.
