Accesibilidad Web en tu Landing: Guía Práctica WCAG

La accesibilidad web consiste en diseñar páginas que cualquier persona pueda percibir, entender y manejar, tenga o no una discapacidad visual, auditiva, motriz o cognitiva, y use el dispositivo o la tecnología de apoyo que use. En una landing, significa que nadie se quede fuera del formulario o del botón de compra por un obstáculo evitable.

Esta guía explica qué es la accesibilidad web, a quién afecta, qué dice el marco legal en España y la Unión Europea, qué pautas básicas conviene aplicar y cómo revisarlas. Tu página puede tener una oferta excelente y, aun así, perder visitas que nunca sabrás que existieron.

¿Qué es la accesibilidad web y a quién afecta?

Una web accesible funciona para personas con distintas capacidades y en distintas situaciones. El estándar internacional de referencia son las Pautas de Accesibilidad para el Contenido Web, conocidas como WCAG, que se organizan en cuatro principios: el contenido debe ser perceptible, operable, comprensible y robusto.

El público afectado es mayor de lo que parece. La Organización Mundial de la Salud estima que alrededor de una de cada seis personas en el mundo vive con alguna discapacidad. A ellas se suman quienes envejecen, quienes tienen una lesión temporal, como un brazo escayolado, o quienes miran el móvil bajo el sol con poco contraste. La accesibilidad no es un asunto de minorías: mejora la experiencia de casi todos.

Cuando una landing no es accesible, el visitante no se queja: simplemente se va. Quien usa un lector de pantalla y se encuentra un botón sin nombre, o quien navega con teclado y no puede llegar al formulario, no deja rastro en tus estadísticas más que una visita que no convierte.

¿Qué exige la normativa en España y en la Unión Europea?

El marco legal es un contexto que conviene conocer, aunque cada caso depende de la actividad y del tamaño de la empresa; ante cualquier duda, consulta con un especialista jurídico.

En el ámbito europeo, la norma técnica de referencia es la EN 301 549, que para contenido web remite a las pautas WCAG. Por otro lado, el Acta Europea de Accesibilidad, o European Accessibility Act, establece requisitos de accesibilidad para determinados productos y servicios, entre ellos algunos servicios de comercio electrónico. Sus obligaciones son aplicables desde el 28 de junio de 2025, y España ha incorporado la directiva a su ordenamiento.

La propia directiva prevé exenciones, por ejemplo para microempresas que prestan servicios. Aun así, que la ley no te obligue no significa que convenga ignorar el tema: los clientes, las plataformas y los socios cada vez esperan webs accesibles, y adelantarse es más barato que corregir después.

¿Qué pautas WCAG básicas debe cumplir tu landing?

No hace falta dominar todo el estándar para mejorar mucho. Cinco puntos cubren la mayoría de los obstáculos que aparecen en una página de captura o de ventas.

• Contraste suficiente. WCAG pide una relación de contraste de al menos 4,5 a 1 para texto normal y 3 a 1 para texto grande. El gris claro sobre blanco queda elegante, pero resulta ilegible para muchos.
• Texto alternativo. Las imágenes con significado necesitan una descripción breve que un lector de pantalla pueda leer; las meramente decorativas deben quedar vacías para que no molesten.
• Navegación por teclado. Todo lo que se puede pulsar con ratón debe poder alcanzarse con la tecla Tab, con un indicador de foco visible, incluido el botón de compra.
• Etiquetas de formulario. Cada campo necesita una etiqueta visible y asociada en el código, no solo un texto de ejemplo que desaparece al escribir.
• Tamaño de toque en móvil. Los botones y enlaces deben ser lo bastante grandes y estar separados. WCAG 2.2 fija un mínimo de 24 píxeles y se recomienda llegar a unos 44 para un toque cómodo.

Más allá de estos cinco puntos, conviene usar titulares ordenados con una jerarquía lógica, escribir enlaces con sentido propio, como «Descargar la guía» en lugar de «Haz clic aquí», y no transmitir información solo con el color.

¿Cómo hacer accesible el formulario y la versión móvil?

El formulario es el punto donde más conversiones se pierden por problemas de accesibilidad. Además de las etiquetas, los mensajes de error deben explicar qué ha ocurrido y cómo corregirlo, no limitarse a marcar un campo en rojo. Muchas de las pautas para reducir la fricción en el formulario de captura son, en realidad, mejoras de accesibilidad.

En el móvil, el reto es el dedo. Un botón pequeño o pegado a otro provoca toques fallidos que afectan a todos, y especialmente a quienes tienen temblores o poca precisión motriz. Si quieres revisar el resto del diseño, hay una guía sobre cómo preparar una landing page para móvil con conexión 4G que complementa estas pautas.

Comprueba también que el texto se puede ampliar hasta un doscientos por cien sin que se rompa el diseño, y que la página no bloquee la rotación de pantalla. Son detalles que apenas cuestan al diseñar y que evitan frustraciones.

¿Cómo comprobar la accesibilidad de tu landing paso a paso?

Medir la accesibilidad no exige un equipo especializado. Con herramientas gratuitas y unas pruebas manuales detectas buena parte de los problemas más habituales. Esta lista sirve como checklist de revisión.

1. Pasa una auditoría automática con una herramienta gratuita como Lighthouse, integrada en Chrome, o con WAVE o axe DevTools, y anota los errores de contraste y de etiquetas.
2. Recorre la página solo con el teclado, usando Tab y Mayús más Tab, y comprueba que alcanzas todos los elementos y que ves siempre dónde está el foco.
3. Escucha la página con un lector de pantalla, como NVDA en Windows o VoiceOver en Mac y iPhone, y revisa que los botones, imágenes y campos se anuncian con sentido.
4. Amplía el texto y prueba la landing en un móvil real, comprobando que los botones se pulsan sin errores y que nada queda cortado.
5. Corrige primero lo que bloquea una acción clave, como el formulario o el botón de compra, y deja para después los detalles menores.

Las herramientas automáticas detectan solo una parte de los problemas, de modo que las pruebas manuales son imprescindibles. Repite la revisión cada vez que cambies el diseño o añadas contenido.

¿Cómo ayuda una landing accesible al SEO y a la conversión?

Muchas prácticas de accesibilidad coinciden con las del SEO: titulares jerarquizados, texto alternativo, enlaces descriptivos y código limpio. También favorecen la lectura automática, un aspecto que cobra importancia con los buscadores de IA; lo explicamos en la guía de optimización para motores generativos. Un contenido bien estructurado es más fácil de interpretar tanto para una persona con lector de pantalla como para un sistema que resume páginas.

En la conversión, el efecto es directo: si más gente puede completar el formulario, más gente convierte. Una página ligera también ayuda a quienes usan equipos modestos o conexiones lentas, y la velocidad de carga forma parte de la experiencia de todos. Conviene medir el efecto de cada cambio con un test A/B, por ejemplo comparando un botón con más contraste frente al original.

Si no quieres partir de cero, un creador de landings como Atomicat te permite construir páginas con estructura ordenada y textos editables, de modo que puedas revisar contrastes, etiquetas y botones sin tocar código.

¿Qué diferencia hay entre una landing accesible y una que no lo es?

La comparación muestra que la accesibilidad no es un añadido estético, sino parte de la calidad de la página.

| Aspecto | Landing sin accesibilidad | Landing accesible |

| --- | --- | --- |

| Contraste y texto | Gris claro sobre blanco, letra pequeña y difícil de leer | Contraste suficiente y texto que se amplía sin romper el diseño |

| Teclado y lector de pantalla | Botones y campos inalcanzables o sin nombre | Todo se alcanza con Tab y se anuncia con sentido |

| Formulario | Campos sin etiqueta y errores solo en rojo | Etiquetas visibles y mensajes de error claros |

| Resultado | Visitantes que se van sin avisar y riesgo de incumplimiento | Más personas completan la acción y la página se entiende mejor |

El coste de hacerlo bien desde el principio es pequeño comparado con rediseñar después una página que ya está en marcha.

Preguntas frecuentes

¿Qué es la accesibilidad web?

Es el diseño de sitios web que cualquier persona pueda percibir, entender y utilizar, con independencia de sus capacidades o de la tecnología que emplee. El estándar de referencia son las pautas WCAG.

¿Cuáles son las pautas de accesibilidad más importantes?

Las básicas son un contraste de color suficiente, textos alternativos en las imágenes, navegación completa por teclado, etiquetas claras en los formularios y botones lo bastante grandes en móvil. Son las que más obstáculos evitan en una landing.

¿Cómo puedo medir la accesibilidad de mi página?

Combina una auditoría automática gratuita, como Lighthouse, WAVE o axe, con pruebas manuales: recorrer la página con teclado y escucharla con un lector de pantalla. Las herramientas automáticas no detectan todos los problemas.

¿Es obligatoria la accesibilidad web en España?

Depende de la actividad y del tamaño de la empresa. El Acta Europea de Accesibilidad exige requisitos a determinados servicios, entre ellos algunos de comercio electrónico, desde el 28 de junio de 2025, con exenciones para microempresas. Consulta tu caso con un asesor.

¿La accesibilidad mejora el SEO y la conversión?

Sí, en buena medida, porque comparte prácticas con el SEO, como titulares ordenados, texto alternativo y enlaces descriptivos. Además, una página que más personas pueden usar convierte a más visitantes.

Que nadie se quede fuera de tu oferta

Cada obstáculo que quitas de tu landing amplía el público que puede comprarte. Empieza por el contraste, las etiquetas y el teclado, revisa el resultado con herramientas gratuitas y mejora de forma gradual sin esperar a la página perfecta.

Comienza tu prueba gratis y construye una landing clara, rápida y fácil de usar para todos tus visitantes.