Test de Accesibilidad Web WCAG: Analiza tu Web Gratis

¿Qué es la Accesibilidad Web y por qué importa?

La accesibilidad web se refiere a la práctica de diseñar y desarrollar sitios web que puedan ser utilizados por todas las personas, independientemente de sus capacidades físicas, sensoriales o cognitivas. Esto incluye a personas con discapacidad visual, auditiva, motriz o cognitiva, pero también a usuarios con conexiones lentas, dispositivos antiguos o situaciones temporales como una lesión en la mano.

Según la Organización Mundial de la Salud, aproximadamente el 15% de la población mundial vive con alguna forma de discapacidad. Eso son más de 1.000 millones de personas. En España, según el INE, hay más de 4,3 millones de personas con alguna discapacidad reconocida. Si tu web no es accesible, estás excluyendo a una parte significativa de la población como potenciales clientes.

Pero la accesibilidad no es solo una cuestión ética o de inclusión. En España es un requisito legal. El Real Decreto 1112/2018 establece que los sitios web y aplicaciones para dispositivos móviles del sector público deben cumplir con los requisitos de accesibilidad. Y la Directiva Europea 2016/2102 amplía esta obligación. Con la entrada en vigor del European Accessibility Act en 2025, las obligaciones se extienden también al sector privado en sectores clave como comercio electrónico, banca, transporte y telecomunicaciones.

Además, una web accesible es una web mejor para todos. Los mismos principios que hacen una web accesible (estructura semántica, textos claros, navegación intuitiva) también mejoran el SEO, la usabilidad y las tasas de conversión. Google valora las webs accesibles porque proporcionan una mejor experiencia de usuario.

Nuestro test de accesibilidad utiliza la API de Google PageSpeed Insights para evaluar automáticamente docenas de criterios de accesibilidad basados en los estándares WCAG 2.1. Si necesitas ayuda profesional para hacer tu web accesible, consulta nuestro servicio de diseño web WordPress.

WCAG 2.1: Los 4 Principios Fundamentales

Las Web Content Accessibility Guidelines (WCAG) son las directrices internacionales de accesibilidad web desarrolladas por el W3C (World Wide Web Consortium). La versión 2.1 es la referencia actual y se organiza en torno a cuatro principios fundamentales, conocidos por el acrónimo POUR:

1. Perceptible

La información y los componentes de la interfaz deben poder presentarse a los usuarios de manera que puedan percibirlos. Esto significa que el contenido no puede depender exclusivamente de un solo sentido.

• Textos alternativos: Todas las imágenes, iconos y elementos gráficos deben tener texto alternativo descriptivo para lectores de pantalla
• Subtítulos y transcripciones: El contenido en vídeo necesita subtítulos; el audio, transcripciones
• Contraste de colores: El texto debe tener suficiente contraste con el fondo (ratio mínimo 4.5:1 para texto normal, 3:1 para texto grande)
• Redimensionamiento: El contenido debe ser legible y funcional cuando se amplía al 200%
• No depender solo del color: La información no debe transmitirse únicamente mediante el color (por ejemplo, errores en formularios)

2. Operable

Los componentes de la interfaz y la navegación deben ser operables por todos los usuarios, independientemente de cómo interactúen con la web.

• Navegación por teclado: Toda la funcionalidad debe ser accesible usando solo el teclado, sin necesidad de ratón
• Foco visible: Los elementos interactivos deben mostrar claramente cuándo tienen el foco del teclado
• Tiempo suficiente: Los usuarios deben tener tiempo suficiente para leer y usar el contenido, con opción de extender plazos
• Sin trampas de teclado: El usuario debe poder navegar libremente sin quedar atrapado en ningún elemento
• Encabezados descriptivos: La estructura de encabezados debe ser lógica y jerárquica para facilitar la navegación

3. Comprensible

La información y el funcionamiento de la interfaz deben ser comprensibles para todos los usuarios.

• Idioma de la página: El idioma principal debe estar declarado en el HTML para que los lectores de pantalla pronuncien correctamente
• Etiquetas claras: Los formularios deben tener etiquetas descriptivas asociadas a cada campo
• Instrucciones claras: Los errores en formularios deben identificarse claramente y ofrecer sugerencias de corrección
• Navegación consistente: Los menús y elementos de navegación deben ser consistentes en todas las páginas
• Prevención de errores: Para acciones importantes (compras, envío de datos), debe haber mecanismos de confirmación o corrección

4. Robusto

El contenido debe ser lo suficientemente robusto para ser interpretado correctamente por una amplia variedad de agentes de usuario, incluidas las tecnologías de asistencia.

• HTML válido: El código HTML debe estar bien formado, con etiquetas correctamente anidadas y atributos válidos
• Atributos ARIA correctos: Si se usan roles y atributos ARIA, deben ser válidos y estar correctamente implementados
• Nombre y rol: Todos los componentes de la interfaz deben tener un nombre y rol accesible para tecnologías de asistencia
• IDs únicos: Los identificadores deben ser únicos en la página para evitar confusión en lectores de pantalla
• Compatibilidad: La web debe funcionar correctamente con diferentes navegadores y tecnologías de asistencia

Niveles de Conformidad WCAG (A, AA, AAA)

Los criterios de éxito de las WCAG se organizan en tres niveles de conformidad, cada uno más estricto que el anterior:

Nivel A (mínimo): Son los requisitos básicos de accesibilidad. Si no se cumplen, la web es prácticamente inaccesible para personas con discapacidades. Incluye criterios como textos alternativos en imágenes, navegación por teclado y contenido que no provoque convulsiones. Es el mínimo absoluto, pero no es suficiente para considerarse accesible.

Nivel AA (recomendado): Es el nivel que la mayoría de legislaciones requieren, incluida la normativa española y europea. Añade criterios como contraste de colores suficiente, redimensionamiento al 200%, subtítulos en vídeo en directo y navegación coherente. Este es el nivel que tu web debería cumplir como mínimo.

Nivel AAA (óptimo): El nivel más alto de accesibilidad. Incluye requisitos como contraste mejorado (7:1), lenguaje sencillo, lengua de signos para vídeos y navegación sin tiempo. Es difícil de alcanzar al 100% en todo un sitio, pero es recomendable para secciones críticas como procesos de compra o formularios de contacto.

Nuestro test de accesibilidad evalúa principalmente criterios de nivel A y AA, que son los más relevantes para la conformidad legal y la accesibilidad práctica de tu web.

Errores de Accesibilidad Más Comunes

Después de analizar cientos de webs, estos son los errores de accesibilidad que encontramos con más frecuencia y que mayor impacto tienen en la experiencia de los usuarios:

Bajo contraste de colores

Es el error más frecuente. Textos grises sobre fondo blanco, botones con colores pastel sobre fondos claros, o texto sobre imágenes sin suficiente contraste. La solución es sencilla: usa herramientas de verificación de contraste y ajusta los colores para cumplir con el ratio mínimo de 4.5:1.

Imágenes sin texto alternativo

Las imágenes sin atributo alt son invisibles para los lectores de pantalla. Cada imagen significativa debe tener un texto alternativo descriptivo. Las imágenes decorativas deben tener alt="" vacío para que los lectores de pantalla las ignoren.

Formularios sin etiquetas

Los campos de formulario que solo tienen placeholder pero no etiqueta <label> asociada son problemáticos. El placeholder desaparece al escribir y los lectores de pantalla pueden no identificar el propósito del campo.

Falta de estilos de foco

Muchos diseñadores eliminan el outline de foco (el borde azul que aparece al navegar con tabulador) porque les parece feo. Esto hace que los usuarios de teclado no puedan ver dónde están. La solución es personalizar el estilo de foco, no eliminarlo.

Estructura de encabezados incorrecta

Saltar niveles de encabezado (de H1 a H3 sin H2) o usar encabezados solo por estética rompe la estructura semántica que usan los lectores de pantalla para navegar. Los encabezados deben seguir una jerarquía lógica.

Idioma no declarado

Si el atributo lang del HTML no está presente o es incorrecto, los lectores de pantalla pronunciarán el contenido con la entonación y reglas del idioma equivocado, haciendo incomprensible el contenido.

Si tu web presenta alguno de estos errores, nuestro servicio de diseño web WordPress incluye la corrección de accesibilidad como parte estándar del desarrollo. No es un extra: es un requisito de calidad.

Cómo Hacer tu Web Accesible: 12 Consejos Prácticos

Mejorar la accesibilidad de tu web no requiere un rediseño completo. Muchas mejoras son sencillas y tienen un gran impacto. Aquí tienes 12 consejos prácticos que puedes implementar desde hoy:

1. Usa HTML semántico

Utiliza las etiquetas HTML correctas para cada elemento: <nav> para la navegación, <main> para el contenido principal, <header> y <footer> para cabecera y pie. Esto permite que las tecnologías de asistencia entiendan la estructura de tu página.

2. Añade textos alternativos a todas las imágenes

Describe el contenido y la función de cada imagen. Para imágenes informativas, sé descriptivo («Gráfico mostrando el aumento del 30% en ventas»). Para imágenes decorativas, usa alt="".

3. Asegura suficiente contraste de colores

Utiliza herramientas como WebAIM Contrast Checker para verificar que el contraste entre texto y fondo cumple con los ratios mínimos de WCAG: 4.5:1 para texto normal y 3:1 para texto grande (18px o superior, o 14px en negrita).

4. Haz todo accesible por teclado

Navega tu web usando solo el tabulador, Enter y las flechas del teclado. Si no puedes acceder a algún elemento interactivo, necesitas corregirlo. Asegúrate de que el orden de tabulación sea lógico.

5. Proporciona estilos de foco visibles

No elimines el outline de foco. En su lugar, personalízalo para que sea visible y coherente con tu diseño. Un borde de 2px en un color de alto contraste es suficiente.

6. Etiqueta todos los campos de formulario

Cada campo de formulario debe tener una etiqueta <label> asociada mediante el atributo for. Los grupos de campos relacionados deben estar dentro de <fieldset> con un <legend>.

7. Declara el idioma de la página

Añade el atributo lang="es" a la etiqueta <html>. Si hay secciones en otro idioma, usa lang en el contenedor correspondiente.

8. Usa encabezados jerárquicos

La página debe tener un solo H1, seguido de H2 para las secciones principales, H3 para subsecciones, etc. No saltes niveles y no uses encabezados solo por estética.

9. Añade subtítulos a los vídeos

Todo contenido en vídeo debe tener subtítulos. Los subtítulos automáticos de YouTube son un buen punto de partida, pero siempre revísalos y corrige los errores.

10. Implementa ARIA solo cuando sea necesario

Los atributos ARIA son útiles para componentes interactivos complejos, pero el HTML semántico es siempre preferible. La primera regla de ARIA es: si puedes usar un elemento HTML nativo con la semántica correcta, úsalo en lugar de ARIA.

11. Testea con lectores de pantalla

Prueba tu web con lectores de pantalla reales como NVDA (Windows, gratuito), VoiceOver (macOS/iOS, integrado) o TalkBack (Android, integrado). La experiencia real te mostrará problemas que ninguna herramienta automática detecta.

12. Incluye la accesibilidad en tu proceso de diseño

No dejes la accesibilidad para el final. Inclúyela desde el diseño: paletas de colores con suficiente contraste, tamaños de fuente legibles, áreas de clic suficientes y flujos de navegación pensados para todos los usuarios.

Accesibilidad Web y SEO: ¿Están Conectados?

La respuesta corta es sí, rotundamente. La accesibilidad web y el SEO comparten más principios de los que imaginas. Muchas de las mejores prácticas de accesibilidad son también factores de posicionamiento en Google:

• Textos alternativos en imágenes: Los lectores de pantalla los necesitan; Google los usa para entender el contenido de las imágenes y posicionarlas en Google Imágenes
• Estructura de encabezados: Los usuarios de lectores de pantalla navegan por encabezados; Google usa la jerarquía de encabezados para entender la estructura del contenido
• HTML semántico: Las tecnologías de asistencia dependen de HTML semántico; Google también lo usa para comprender mejor tu contenido
• Velocidad de carga: Una web lenta es inaccesible para usuarios con conexiones lentas; Google penaliza las webs lentas en los rankings
• Navegación clara: Los usuarios con discapacidades necesitan navegación predecible; Google valora las webs con estructura clara y enlaces internos bien organizados
• Textos descriptivos en enlaces: «Haz clic aquí» no dice nada a un lector de pantalla ni a Google. Los enlaces descriptivos benefician a ambos

Invertir en accesibilidad es, por tanto, una inversión doble: mejoras la experiencia para personas con discapacidades y, simultáneamente, mejoras tu posicionamiento en buscadores. Es una de las pocas estrategias web donde absolutamente todos ganan.

Si quieres profundizar en cómo el SEO técnico puede mejorar tanto tu posicionamiento como tu accesibilidad, consulta nuestro servicio de posicionamiento SEO.

Herramientas de Accesibilidad Web

Nuestro test de accesibilidad es un excelente punto de partida, pero la evaluación completa de la accesibilidad requiere múltiples herramientas y enfoques. Estas son las herramientas más recomendadas para auditar y mejorar la accesibilidad de tu web:

Herramientas automáticas

• Este test: Utiliza Google Lighthouse para una evaluación rápida y completa de los criterios WCAG principales. Ideal para un primer diagnóstico
• axe DevTools: Extensión de navegador gratuita de Deque que detecta errores de accesibilidad directamente en la página. Muy detallada y con sugerencias de corrección
• WAVE: Herramienta de WebAIM que muestra visualmente los errores de accesibilidad directamente sobre la página web
• Pa11y: Herramienta de código abierto para testing automatizado de accesibilidad, ideal para integrar en pipelines CI/CD
• Lighthouse CI: Permite ejecutar auditorías de accesibilidad como parte del proceso de despliegue, detectando regresiones antes de publicar

Herramientas manuales

• Lectores de pantalla: NVDA (Windows, gratuito), VoiceOver (macOS/iOS), TalkBack (Android). Imprescindibles para verificar la experiencia real
• Navegación por teclado: Simplemente desconecta el ratón y navega con Tab, Enter y las flechas. Identifica rápidamente problemas de foco y orden
• WebAIM Contrast Checker: Herramienta online para verificar ratios de contraste entre colores específicos
• Simuladores de daltonismo: Extensiones como Colorblindly o funciones integradas en Chrome DevTools para ver tu web como la ven personas con daltonismo

Importante: Las herramientas automáticas detectan aproximadamente el 30-40% de los problemas de accesibilidad. El resto requiere revisión manual y testing con usuarios reales. Una auditoría profesional combina ambos enfoques para una evaluación completa.

Normativa de Accesibilidad en España

La normativa de accesibilidad web en España ha evolucionado significativamente en los últimos años y se espera que sea aún más exigente en el futuro cercano:

Real Decreto 1112/2018

Esta norma transpone la Directiva Europea 2016/2102 y establece los requisitos de accesibilidad para los sitios web y aplicaciones móviles del sector público español. Obliga a cumplir con la norma UNE-EN 301 549, que a su vez referencia los criterios de WCAG 2.1 nivel AA.

• Se aplica a webs de la Administración General del Estado, comunidades autónomas, entidades locales y organismos vinculados
• Obliga a incluir una declaración de accesibilidad en cada web
• Establece un mecanismo de reclamación para los usuarios
• Las webs nuevas debían cumplir desde septiembre de 2019; las existentes, desde septiembre de 2020

European Accessibility Act (Acta Europea de Accesibilidad)

La Directiva (UE) 2019/882, conocida como European Accessibility Act, es un cambio de paradigma porque extiende las obligaciones de accesibilidad al sector privado. Los estados miembros debían transponer la directiva antes de junio de 2022, y los requisitos son aplicables desde junio de 2025.

• Sectores afectados: Comercio electrónico, servicios bancarios, transporte de pasajeros, telecomunicaciones, servicios audiovisuales y libros electrónicos
• Qué implica: Los productos y servicios digitales de estos sectores deben cumplir con requisitos de accesibilidad basados en la norma EN 301 549
• Sanciones: Cada estado miembro define sus propias sanciones, pero deben ser «efectivas, proporcionadas y disuasorias»
• Microempresas: Hay una exención parcial para microempresas (menos de 10 empleados y facturación inferior a 2 millones de euros), pero se les recomienda igualmente cumplir

¿Quién debe cumplir?

Aunque actualmente la obligación legal directa se centra en el sector público y determinados sectores privados, la tendencia es clara: la accesibilidad web será obligatoria para todos. Además, cualquier empresa puede enfrentar demandas por discriminación si su web es inaccesible, basándose en la Ley General de derechos de las personas con discapacidad (Real Decreto Legislativo 1/2013).

Nuestra recomendación es no esperar a que la ley te obligue. Hacer tu web accesible ahora es una inversión inteligente que te prepara para la normativa futura, amplía tu audiencia y mejora tu reputación.

Preguntas Frecuentes sobre Accesibilidad Web

¿Es gratis este test de accesibilidad?

Sí, completamente gratuito y sin registro. Utiliza la API pública de Google PageSpeed Insights para analizar tu web. Puedes hacer tantos análisis como necesites sin ningún coste.

¿Qué estándares evalúa la herramienta?

La herramienta evalúa los criterios de accesibilidad basados en WCAG 2.1 que Google Lighthouse puede verificar automáticamente. Esto incluye la mayoría de criterios de nivel A y AA, organizados en las cuatro categorías WCAG: Perceptible, Operable, Comprensible y Robusto.

¿Una puntuación de 100 significa que mi web es completamente accesible?

No necesariamente. Las herramientas automáticas detectan aproximadamente el 30-40% de los problemas de accesibilidad. Una puntuación perfecta significa que has superado todas las auditorías automatizadas, pero pueden existir problemas que solo se detectan con revisión manual y testing con usuarios con discapacidades reales.

¿Mi empresa está obligada a tener una web accesible?

Si tu empresa pertenece al sector público, sí, desde 2020. Si pertenece al sector privado en los sectores cubiertos por el European Accessibility Act (e-commerce, banca, transporte, telecomunicaciones), desde junio de 2025. En cualquier caso, cualquier persona puede presentar una reclamación por discriminación si tu web es inaccesible.

¿Cuánto cuesta hacer una web accesible?

Depende del estado actual de tu web. Muchas mejoras de accesibilidad son sencillas y de bajo coste: añadir textos alternativos, mejorar contrastes, añadir etiquetas a formularios. Un rediseño completo con accesibilidad como prioridad puede costar entre 2.000 y 15.000 euros dependiendo de la complejidad del sitio.

¿Puedo hacer mi web accesible sin rediseñarla?

En muchos casos, sí. Las mejoras de accesibilidad más impactantes (contraste, alt text, etiquetas, estructura de encabezados, idioma) se pueden implementar sin cambiar el diseño visual. Solo en casos de webs con problemas estructurales graves es necesario un rediseño.

¿Los widgets de accesibilidad (overlays) son suficientes?

No. Los overlays de accesibilidad (como AccessiBe, UserWay, etc.) son soluciones que se superponen a tu web pero no corrigen los problemas reales del código. La mayoría de expertos en accesibilidad los desaconseja porque generan una falsa sensación de conformidad, pueden interferir con tecnologías de asistencia reales y no cumplen con los estándares legales de accesibilidad.

¿Con qué frecuencia debería testear la accesibilidad?

Lo ideal es testear la accesibilidad después de cada cambio significativo en la web (nuevo diseño, nuevas funcionalidades, cambios de contenido). Como mínimo, haz un test completo cada trimestre. Si usas un pipeline CI/CD, integra tests automáticos de accesibilidad en cada despliegue.

¿Necesitas que tu Web Sea Accesible? LaudeMMedia Puede Ayudarte

LaudeMMedia lleva más de 25 años desarrollando webs que funcionan para todos. La accesibilidad no es un añadido en nuestro proceso de desarrollo: es un requisito fundamental. Desde el diseño web hasta la optimización SEO y campañas de Google Ads: diseñamos experiencias digitales inclusivas y efectivas.

Tanto si necesitas una auditoría completa de accesibilidad, como si quieres desarrollar una web accesible desde cero o adaptar tu web actual a los estándares WCAG 2.1, tenemos la experiencia y las herramientas para ayudarte.

También te puede interesar nuestro glosario DevOps si trabajas en entornos técnicos y quieres entender mejor la infraestructura detrás de una web accesible.

Solicita tu auditoría de accesibilidad → o llámanos al +34 910 059 091.