La checklist de accesibilidad para landing pages

Una landing page accesible es aquella que una persona puede leer, recorrer con el tabulador y enviar sin ratón y sin una vista perfecta. Esta checklist de accesibilidad para landing pages empieza por las cuatro comprobaciones que cazan la mayoría de fallos: contraste de texto de al menos 4,5 a 1, controles interactivos de al menos 24 por 24 píxeles CSS, un estado de foco visible en cada control y una etiqueta real en cada campo del formulario. Las cuatro son baratas de resolver en diseño y caras de meter después.

El contraste es donde falla la mayoría de landing pages

WCAG fija el contraste mínimo del texto normal en 4,5 a 1 frente a su fondo, en el nivel AA. El texto grande se queda en 3 a 1. Grande significa al menos 18 puntos, o 14 puntos en negrita, que en CSS son aproximadamente 24px, o 18.5px en negrita. Los valores no se redondean, así que 4,499 a 1 no pasa. El texto de cuerpo en gris claro sobre blanco es el sospechoso habitual. Después viene el texto blanco sobre una foto, donde el contraste aguanta en la parte de arriba de la imagen y se cae por abajo.

Los botones y los iconos también necesitan contraste

El texto es solo la mitad. WCAG pide 3 a 1 en los componentes de interfaz y en los objetos gráficos con significado, frente a los colores que tienen al lado, también en nivel AA. Eso cubre el borde de un input, el contorno de un botón, una casilla, una estrella de valoración y cualquier icono que cargue significado por sí solo. El contorno gris pálido de un input sobre una card blanca es el fallo más común en una landing page. Y es justo el elemento que la gente tiene que ver antes de poder convertir.

Dale a cada zona de toque 24 por 24 píxeles

WCAG 2.2 añadió una regla de tamaño de objetivo en nivel AA. Los objetivos interactivos deberían medir al menos 24 por 24 píxeles CSS. Se permiten objetivos más pequeños cuando están lo bastante separados como para que un círculo de 24 píxeles centrado en cada uno no se solape con otro. Los enlaces dentro de una frase quedan exentos. En la práctica esto pega a los botones de icono, al botón de cerrar de un modal, a los iconos sociales del pie y a los enlaces apretados de la línea legal del final de la página.

El acceso por teclado es una prueba de cinco minutos

Suelta el ratón y pulsa Tab desde arriba de la página. Cada enlace, botón, input y control de menú debería recibir el foco en un orden que coincida con el orden visual, y siempre deberías ver dónde estás. Los componentes a medida son los que más fallan aquí. Un slider hecho con divs te deja atrapado. Un modal de vídeo se queda con el foco. Una cabecera fija tapa el elemento al que acabas de llegar. Si no puedes llegar a tu botón principal y dispararlo con el teclado, la página está rota.

Dale a cada campo del formulario una etiqueta real

Un placeholder desaparece en cuanto alguien escribe, así que quien se pierda no tiene nada con lo que comprobarlo. Los lectores de pantalla tratan el texto del placeholder de forma inconsistente. Pon una etiqueta visible encima de cada campo. Deja el placeholder para un ejemplo de formato si lo quieres, y conecta bien la etiqueta con el input, para que tocar la etiqueta ponga el foco en el campo. Los mensajes de error tienen que decir con palabras qué ha ido mal. El color por sí solo no puede ser lo que marca un campo como inválido.

Las normas de la UE que llegaron en 2025

La Ley Europea de Accesibilidad entró en vigor el 28 de junio de 2025. Se aplica a los servicios que se venden a consumidores en la UE, incluidos el ecommerce, la banca y la compra de billetes de transporte. Usa la norma EN 301 549, que se apoya en el nivel AA de WCAG. Si vendes a consumidores europeos, la accesibilidad pasó de ser una buena práctica a ser un requisito legal. La vigilancia va por los estados miembros y no por un único organismo, lo que hace la exposición más difícil de prever, y no más pequeña.

Haz esta checklist de accesibilidad en veinte minutos

Empieza con un comprobador automático y luego ignora la puntuación, porque las herramientas automáticas solo cazan una parte de lo que importa. Recorre la página entera con el tabulador. Muestrea el color de cada texto y de cada botón con un comprobador de contraste. Pon el zoom del navegador al 200% y confirma que nada se solapa ni se corta. Enciende el lector de pantalla que trae tu sistema operativo y escucha el hero y el formulario. Arregla los valores de contraste en tus design tokens en lugar de página por página, o el mismo fallo se volverá a publicar en la siguiente.