Qué es
Una etiqueta correctamente programada es un texto vinculado de forma explícita a un campo de formulario concreto en el código subyacente de la página (normalmente mediante un atributo for que coincide con el id del campo), de modo que un lector de pantalla anuncia esa etiqueta en el instante en que el visitante mueve el foco al campo — "Dirección de correo electrónico, campo de texto", por ejemplo. Este es un requisito más estricto y técnico que simplemente tener un texto parecido a una etiqueta visible cerca del campo, que es el ángulo que se trata en nuestra guía general de etiquetado de campos de formulario centrada en las tasas de conversión.
Un campo puede parecer perfectamente etiquetado para un visitante vidente (con el texto justo al lado de la caja) sin tener ninguna conexión real programada entre ese texto y el campo — que es exactamente el hueco que busca esta comprobación centrada en accesibilidad.
En qué afecta
Un lector de pantalla no ve el diseño visual de una página — lee la estructura del código subyacente, así que una etiqueta que solo está visualmente cerca de un campo pero no está vinculada explícitamente a él en el código puede que nunca se anuncie cuando un usuario de lector de pantalla llegue a ese campo. Sin escuchar para qué sirve un campo, se quedan adivinando o simplemente lo saltan, lo que puede significar que un usuario de lector de pantalla sencillamente no pueda completar un formulario que a un visitante vidente le resulta perfectamente sencillo.
Este es uno de los requisitos más consolidados y específicamente nombrados de las WCAG (las pautas de accesibilidad estándar que muchas organizaciones deben cumplir por ley), precisamente porque los formularios son tan centrales para completar de verdad una tarea en la web — registrarse, pagar, ponerse en contacto.
Cómo solucionarlo
- Para cada campo de formulario, añade un elemento
<label>con un atributoforque coincida exactamente con el atributoidde ese campo. - Como alternativa, envuelve el campo directamente dentro de la propia etiqueta
<label>, lo cual crea la misma conexión explícita sin necesidad de que coincidan los IDs. - Para un campo sin ninguna etiqueta visible por diseño (un campo de solo icono de búsqueda, por ejemplo), usa
aria-label="Buscar"directamente en el campo para que un lector de pantalla siga anunciando su propósito. - Evita depender solo del texto de marcador de posición (placeholder) como sustituto de una etiqueta real — los lectores de pantalla lo gestionan de forma inconsistente, y de todos modos desaparece en cuanto se escribe texto.
- Prueba navegando por tu formulario solo con el teclado (tabulador) y un lector de pantalla gratuito (NVDA, VoiceOver) para confirmar que cada campo anuncia un propósito claro.