Accesibilidad Web: Normativa WCAG y Como Cumplirla en 2026
La accesibilidad web ya no es una cuestion etica opcional: es una obligacion legal para un numero creciente de organizaciones en Espana y Europa. Con la entrada en vigor de la European Accessibility Act (EAA) en junio de 2025 y la legislacion espanola que la transpone, millones de webs y aplicaciones deben cumplir con los estandares WCAG o enfrentarse a sanciones.
Pero mas alla de la normativa, la accesibilidad web es una oportunidad de negocio. En Espana, mas de 4 millones de personas tienen alguna discapacidad reconocida, y millones mas tienen discapacidades temporales o situacionales (una lesion en la mano, usar el movil con sol directo, un entorno ruidoso). Una web accesible llega a mas personas, convierte mejor y posiciona mejor en Google.
En LaudeMMedia, con mas de 25 anos de experiencia en diseno web y desarrollo, ayudamos a empresas a cumplir con la normativa de accesibilidad sin sacrificar diseno ni funcionalidad. En esta guia te explicamos todo lo que necesitas saber.
Que Es la Accesibilidad Web
La accesibilidad web significa que las personas con discapacidades pueden percibir, comprender, navegar e interactuar con la web de forma efectiva. Tambien implica que pueden contribuir a la web.
Tipos de Discapacidad que Afecta la Accesibilidad Web
| Tipo de discapacidad | Ejemplos | Barreras web comunes |
|---|---|---|
| Visual | Ceguera, baja vision, daltonismo | Imagenes sin texto alternativo, bajo contraste, contenido no compatible con lector de pantalla |
| Auditiva | Sordera, hipoacusia | Videos sin subtitulos, audio sin transcripcion |
| Motora | Paralisis, temblores, artritis | Elementos demasiado pequenos, navegacion solo con raton, timeouts cortos |
| Cognitiva | Dislexia, TDAH, autismo | Textos complejos, navegacion confusa, distracciones excesivas |
| Temporal | Brazo roto, migrania, infeccion ocular | Mismas barreras que las permanentes |
| Situacional | Sol en pantalla, entorno ruidoso, bebe en brazos | Bajo contraste, audio sin subtitulos, interacciones complejas |
Dato clave: las mejoras de accesibilidad benefician a todos los usuarios, no solo a las personas con discapacidad. Los subtitulos en videos, por ejemplo, son utilizados por el 85% de los usuarios de redes sociales que ven videos sin sonido.
Normativa de Accesibilidad Web en Espana y Europa
European Accessibility Act (EAA) – Directiva 2019/882
La EAA es la directiva europea que establece requisitos de accesibilidad para productos y servicios. Su transposicion en Espana entro en vigor el 28 de junio de 2025.
Quien esta obligado:
- Servicios de comercio electronico (tiendas online)
- Servicios bancarios y financieros
- Servicios de transporte (billetes, informacion)
- Servicios de comunicaciones electronicas
- Servicios de acceso a medios audiovisuales
- Libros electronicos y software educativo
Excepciones:
- Microempresas (menos de 10 empleados y menos de 2 millones de facturacion) estan exentas para servicios, pero no para productos
- Contenido pregrabado antes de la fecha de aplicacion
- Contenido de terceros no controlado por la organizacion
Real Decreto 1112/2018 (Espana)
Este decreto transpone la Directiva europea 2016/2102 sobre accesibilidad del sector publico:
Obligados:
- Todas las administraciones publicas (estatal, autonomica, local)
- Entidades de derecho publico
- Asociaciones de administraciones publicas
- Fundaciones del sector publico
- Universidades publicas
Requisito: cumplimiento de WCAG 2.1 nivel AA como minimo.
Ley General de Discapacidad (Real Decreto Legislativo 1/2013)
Establece el derecho de las personas con discapacidad a acceder a la informacion y comunicacion, incluyendo las tecnologias digitales. Aplica tanto al sector publico como al privado.
Sanciones por Incumplimiento
Las sanciones varian segun la normativa aplicable:
| Gravedad | Sector publico (RD 1112/2018) | Sector privado (EAA) |
|---|---|---|
| Leve | Hasta 30.000 EUR | Hasta 100.000 EUR |
| Grave | 30.001 – 90.000 EUR | Variable por pais miembro |
| Muy grave | 90.001 – 300.000 EUR | Variable por pais miembro |
Ademas de las sanciones economicas, el incumplimiento puede generar demandas por discriminacion y dano reputacional significativo.
WCAG: El Estandar de Accesibilidad Web
Las Web Content Accessibility Guidelines (WCAG) son el estandar internacional de accesibilidad web, desarrollado por el W3C (World Wide Web Consortium). La version vigente es WCAG 2.2, publicada en octubre de 2023.
Los 4 Principios POUR
Las WCAG se organizan en torno a cuatro principios fundamentales:
1. Perceptible (Perceivable):
La informacion y los componentes de la interfaz deben presentarse de forma que los usuarios puedan percibirlos.
- Alternativas de texto para contenido no textual
- Alternativas para medios basados en tiempo (video, audio)
- Contenido adaptable a diferentes presentaciones
- Distinguible (contraste, tamano de texto)
2. Operable (Operable):
Los componentes de la interfaz y la navegacion deben ser operables por todos los usuarios.
- Accesible por teclado
- Tiempo suficiente para interactuar
- No causar convulsiones ni reacciones fisicas
- Navegable y localizable
3. Comprensible (Understandable):
La informacion y el manejo de la interfaz deben ser comprensibles.
- Texto legible y comprensible
- Comportamiento predecible
- Ayuda para evitar y corregir errores
4. Robusto (Robust):
El contenido debe ser lo suficientemente robusto para ser interpretado por una amplia variedad de tecnologias, incluyendo tecnologias de asistencia.
- Compatible con tecnologias actuales y futuras
- Marcado HTML valido y semantico
Niveles de Conformidad WCAG
| Nivel | Requisito | Uso |
|---|---|---|
| A | Minimo basico | Elimina barreras criticas |
| AA | Nivel medio (recomendado) | Exigido por la mayoria de legislaciones |
| AAA | Maximo | Optimo, pero no siempre viable para todo el sitio |
La legislacion espanola y europea exige el nivel AA como minimo para las organizaciones obligadas.
Novedades de WCAG 2.2
WCAG 2.2 anade nuevos criterios respecto a la version 2.1:
- 2.4.11 Focus Not Obscured (Minimum) (AA): el foco del teclado no debe quedar oculto por otros elementos
- 2.4.12 Focus Not Obscured (Enhanced) (AAA): el foco debe ser completamente visible
- 2.4.13 Focus Appearance (AAA): el indicador de foco debe tener un tamano y contraste suficientes
- 2.5.7 Dragging Movements (AA): las acciones de arrastre deben tener alternativa de clic
- 2.5.8 Target Size (Minimum) (AA): los objetivos tactiles deben tener al menos 24×24 CSS px
- 3.2.6 Consistent Help (A): los mecanismos de ayuda deben estar en una posicion consistente
- 3.3.7 Redundant Entry (A): no pedir al usuario la misma informacion dos veces
- 3.3.8 Accessible Authentication (Minimum) (AA): la autenticacion no debe depender de pruebas cognitivas
- 3.3.9 Accessible Authentication (Enhanced) (AAA): autenticacion sin pruebas cognitivas ni reconocimiento de objetos
Como Hacer Tu Web Accesible: Guia Practica
Imagenes y Contenido No Textual
Texto alternativo (alt text):
- Todas las imagenes informativas deben tener un texto alternativo descriptivo
- Las imagenes decorativas deben tener alt=»» (vacio, no ausente)
- Los graficos complejos necesitan una descripcion larga ademas del alt
- Los botones con icono sin texto necesitan un aria-label
Ejemplos de alt text:
| Imagen | Alt text malo | Alt text bueno |
|---|---|---|
| Foto de equipo | «imagen» | «Equipo de LaudeMMedia en la oficina de Malaga» |
| Grafico de barras | «grafico» | «Grafico de crecimiento de trafico: 50% en T1, 120% en T2, 187% en T3» |
| Logo | «logo» | «LaudeMMedia – Agencia de Marketing Digital» |
| Imagen decorativa | «separador bonito» | alt=»» (vacio) |
Color y Contraste
Requisitos WCAG AA:
- Ratio de contraste minimo 4.5:1 para texto normal
- Ratio de contraste minimo 3:1 para texto grande (18px+ o 14px+ negrita)
- Ratio de contraste minimo 3:1 para elementos de interfaz y graficos
- No usar el color como unico medio para transmitir informacion
Herramientas para verificar contraste:
- WebAIM Contrast Checker
- Colour Contrast Analyser (CCA)
- Chrome DevTools (Accessibility panel)
- Figma plugins de accesibilidad
Navegacion por Teclado
Todo el contenido y funcionalidad debe ser accesible mediante teclado:
- Tab: mover entre elementos interactivos
- Enter/Space: activar botones y enlaces
- Flechas: navegar dentro de menus, tabs, sliders
- Escape: cerrar modales y popups
Checklist de navegacion por teclado:
- Todos los enlaces y botones son accesibles con Tab
- El orden de tabulacion es logico y predecible
- El indicador de foco es visible (outline o similar)
- No hay trampas de teclado (elementos de los que no se puede salir)
- Los modales atrapan el foco correctamente (focus trap)
- Los menus desplegables son operables con teclado
- Los carruseles tienen controles con teclado
- Los formularios son completamente accesibles con teclado
Formularios Accesibles
- Cada campo tiene una etiqueta (label) asociada con el atributo for/id
- Los errores se identifican claramente (no solo con color) y se describen en texto
- Los campos obligatorios se identifican de forma programatica (aria-required)
- Las instrucciones se proporcionan antes del formulario o antes de cada seccion
- Los mensajes de exito/error son anunciados por lectores de pantalla (aria-live)
Multimedia Accesible
Video:
- Subtitulos sincronizados para contenido hablado (WCAG 1.2.2, nivel A)
- Audiodescripcion para contenido visual relevante (WCAG 1.2.5, nivel AA)
- Transcripcion completa disponible
- Controles de reproduccion accesibles por teclado
- Sin reproduccion automatica (o con mecanismo para detener)
Audio:
- Transcripcion textual del contenido
- Controles accesibles
HTML Semantico
El HTML semantico es la base de la accesibilidad:
...
...
Etiquetas semanticas esenciales:
,,,: landmarks de paginaa: jerarquia de encabezados (sin saltar niveles)para acciones,para enlaces (nunca al reves)con
, ,,para formulariosARIA (Accessible Rich Internet Applications)
ARIA es un conjunto de atributos que mejoran la accesibilidad de contenido dinamico:
Primera regla de ARIA: no usar ARIA si existe un elemento HTML nativo que ya sea accesible. ARIA complementa HTML, no lo sustituye.
Atributos ARIA mas utilizados:
aria-label: etiqueta para elementos sin texto visiblearia-labelledby: referencia a otro elemento que sirve de etiquetaaria-describedby: descripcion adicionalaria-expanded: estado de elementos colapsablesaria-hidden: ocultar elementos de lectores de pantallaaria-live: anunciar cambios dinamicosrole: definir el rol de un elemento (dialog, alert, tab, etc.)
Accesibilidad en WordPress
WordPress tiene un compromiso con la accesibilidad, pero el nivel real depende del tema y los plugins utilizados.
Temas Accesibles
WordPress tiene una etiqueta «accessibility-ready» para temas que cumplen requisitos basicos. Sin embargo, «accessibility-ready» no significa plenamente accesible: es un punto de partida.
Temas con buena accesibilidad base:
- Twenty Twenty-Four (tema por defecto)
- GeneratePress
- Flavor
- Flavor
Aspectos a verificar en cualquier tema:
- Contraste de colores adecuado
- Navegacion por teclado funcional
- Etiquetas semanticas correctas
- Skip links implementados
- Formularios con labels asociados
Plugins de Accesibilidad para WordPress
WP Accessibility:
- Anadir skip links
- Corregir problemas comunes de accesibilidad
- Herramientas de diagnostico basicas
- Gratuito
One Click Accessibility:
- Barra de herramientas de accesibilidad para el usuario
- Ajuste de tamano de texto, contraste, escala de grises
- No soluciona problemas de fondo, solo mejoras superficiales
Importante: los «overlays» de accesibilidad (widgets que anaden un boton flotante con opciones de accesibilidad) no son una solucion real y son ampliamente criticados por la comunidad de accesibilidad. No sustituyen el cumplimiento estructural de WCAG.
Editor de Bloques (Gutenberg) y Accesibilidad
El editor de bloques de WordPress ha mejorado significativamente en accesibilidad:
- Los bloques generan HTML semantico por defecto
- Las imagenes solicitan texto alternativo
- Los encabezados mantienen la jerarquia
- Los formularios tienen labels asociados
Sin embargo, la accesibilidad final depende de como el editor usa estos bloques. Un diseno web profesional con criterios de accesibilidad desde el inicio es siempre preferible a intentar corregir problemas despues.
Herramientas de Auditoria de Accesibilidad
Herramientas Automatizadas
Herramienta Tipo Coste Uso WAVE Extension navegador Gratis Analisis visual de errores axe DevTools Extension navegador Gratis / Premium Auditoria tecnica profunda Lighthouse Integrado en Chrome Gratis Puntuacion general + detalle Pa11y CLI / Dashboard Gratis (open source) Monitoreo continuo Siteimprove Plataforma completa Premium Empresas grandes, cumplimiento Tenon API Premium Integracion en desarrollo Importante: las herramientas automatizadas detectan aproximadamente el 30-40% de los problemas de accesibilidad. El resto requiere revision manual.
Auditoria Manual
Checklist de auditoria manual:
- Navegacion solo con teclado: recorre toda la web sin usar el raton
- Lector de pantalla: usa NVDA (gratuito, Windows), VoiceOver (macOS/iOS) o TalkBack (Android)
- Zoom al 200%: verifica que todo el contenido es legible y funcional
- Desactivar CSS: verifica que el contenido tiene orden y sentido logico
- Desactivar imagenes: verifica que todo el contenido informativo tiene alternativa textual
- Modo de alto contraste: verifica la visibilidad de todos los elementos
- Formularios: completa todos los formularios solo con teclado y lector de pantalla
- Videos y audio: verifica subtitulos, audiodescripcion y transcripciones
- Responsive: verifica accesibilidad en movil y tablet
- Lenguaje: verifica que el nivel de lectura es adecuado
Declaracion de Accesibilidad
La legislacion exige que los sitios web obligados publiquen una declaracion de accesibilidad que incluya:
- Nivel de conformidad WCAG declarado
- Contenido no accesible y razones
- Alternativas accesibles disponibles
- Fecha de la ultima revision
- Datos de contacto para reportar problemas
- Enlace al mecanismo de reclamacion
Plan de Implementacion de Accesibilidad
Fase 1: Auditoria Inicial (2-4 semanas)
- Auditoria automatizada con WAVE, axe y Lighthouse
- Auditoria manual con teclado y lector de pantalla
- Revision de contenido (textos alternativos, contraste, formularios)
- Informe de hallazgos con prioridades
Fase 2: Correccion de Errores Criticos (4-8 semanas)
- Corregir barreras de nivel A (las mas basicas)
- Implementar textos alternativos en todas las imagenes
- Corregir problemas de contraste
- Asegurar navegacion por teclado
- Anadir skip links y landmarks
Fase 3: Cumplimiento Nivel AA (4-12 semanas)
- Corregir todos los criterios de nivel AA
- Subtitular videos existentes
- Optimizar formularios
- Implementar ARIA donde sea necesario
- Publicar declaracion de accesibilidad
Fase 4: Mantenimiento Continuo
- Incluir accesibilidad en el proceso de creacion de contenido
- Formacion del equipo editor
- Auditoria trimestral automatizada
- Auditoria manual anual
- Actualizacion de la declaracion de accesibilidad
Accesibilidad y SEO: Beneficios Compartidos
La accesibilidad web y el posicionamiento SEO comparten muchos principios:
Practica Beneficio accesibilidad Beneficio SEO Textos alt en imagenes Lectores de pantalla Google entiende las imagenes Encabezados jerarquicos Estructura navegable Estructura de contenido para Google HTML semantico Tecnologias de asistencia Rastreo e indexacion mejorados Subtitulos en videos Usuarios sordos/hipoacusicos Indexacion de contenido de video Velocidad de carga Menos frustracion Core Web Vitals / ranking Responsive Usuarios con zoom/ampliacion Mobile-first indexing Estructura de enlaces Navegacion por teclado Link equity y rastreo Contenido claro Usuarios con discapacidad cognitiva Mejor engagement y dwell time Invertir en accesibilidad mejora directamente el SEO de tu sitio web.
Preguntas Frecuentes sobre Accesibilidad Web y WCAG
Mi empresa esta obligada a cumplir con WCAG?
Si perteneces al sector publico (administracion, entidades publicas, universidades), si, estas obligado por el RD 1112/2018 a cumplir WCAG 2.1 nivel AA. Si ofreces servicios de comercio electronico, banca, transporte o comunicaciones, la European Accessibility Act te obliga desde junio de 2025. Las microempresas (menos de 10 empleados y 2M de facturacion) estan exentas en servicios, pero no en productos digitales.
Que nivel de WCAG debo cumplir?
La legislacion espanola y europea exige el nivel AA como minimo. El nivel A es insuficiente legalmente, y el nivel AAA, aunque deseable, no es exigible para la totalidad de un sitio web. El nivel AA es el estandar de referencia internacional y cubre la gran mayoria de las necesidades de accesibilidad.
Cuanto cuesta hacer una web accesible?
El coste depende del estado actual de la web. Si la accesibilidad se tiene en cuenta desde el diseno, el sobrecoste es minimo (10-15% del presupuesto de desarrollo). Adaptar una web existente puede costar entre 2.000 y 15.000 EUR dependiendo del tamano y la complejidad. La inversion siempre es inferior al coste potencial de las sanciones.
Los overlays de accesibilidad (widgets) son suficientes para cumplir la ley?
No. Los overlays (como AccessiBe, UserWay y similares) son ampliamente rechazados por la comunidad de accesibilidad y por expertos legales. No resuelven los problemas estructurales de accesibilidad, pueden generar problemas adicionales para usuarios de tecnologias de asistencia, y no constituyen cumplimiento legal segun la interpretacion de la normativa vigente.
Como afecta la accesibilidad al posicionamiento en Google?
Google valora positivamente la accesibilidad web. Muchas practicas de accesibilidad (HTML semantico, textos alternativos, velocidad de carga, responsive) son directamente factores de posicionamiento. Ademas, una web accesible mejora las metricas de experiencia de usuario (Core Web Vitals, tasa de rebote, tiempo en pagina), lo que beneficia indirectamente al SEO.
Necesito auditar mi web periodicamente?
Si. La accesibilidad no es un proyecto puntual, sino un proceso continuo. Cada vez que se anade contenido nuevo (articulos, imagenes, videos) o funcionalidad nueva (formularios, interacciones), se deben aplicar criterios de accesibilidad. Se recomienda una auditoria automatizada trimestral y una auditoria manual completa anual.
Puedo hacer mi web accesible yo mismo o necesito un profesional?
Las correcciones basicas (textos alternativos, contraste, estructura de encabezados) pueden hacerse internamente con formacion basica. Sin embargo, para cumplimiento legal completo a nivel AA, se recomienda contar con un profesional o agencia con experiencia en accesibilidad. Los problemas tecnicos (ARIA, navegacion por teclado, compatibilidad con lectores de pantalla) requieren conocimientos especializados.
Que ocurre si alguien denuncia que mi web no es accesible?
En el sector publico, existe un mecanismo de queja formal ante la autoridad competente. En el sector privado, la persona afectada puede presentar una reclamacion ante las autoridades de consumo o presentar una demanda por discriminacion amparada en la Ley General de Discapacidad. En ambos casos, la empresa debera demostrar sus esfuerzos de cumplimiento o enfrentarse a sanciones.
—
Conclusion: La Accesibilidad Web Es Obligacion, Oportunidad y Buena Practica
La accesibilidad web WCAG no es solo una obligacion legal: es una oportunidad para llegar a mas usuarios, mejorar el SEO, y demostrar responsabilidad social corporativa. Las empresas que abrazan la accesibilidad como parte de su estrategia digital obtienen ventajas competitivas tangibles.
En LaudeMMedia somos especialistas en diseno web accesible y desarrollo WordPress que cumple con los estandares WCAG 2.2. Si necesitas una auditoria de accesibilidad de tu web actual o un nuevo diseno accesible desde el inicio, contacta con nosotros. Mas de 25 anos de experiencia en desarrollo web profesional nos avalan.
Últimos artículos
Subscríbete a nuestra newsletter
No Spam! Solo contenido de valor directamente a tu inbox
Deja una respuesta