Guía: Cómo hacer que tu web cumpla con la normativa europea de accesibilidad

Si estás leyendo esto, probablemente te han dicho algo como “tu web tiene que cumplir con la normativa europea de accesibilidad”. Y tú, que ni sabías que eso existía o que suena a “tengo que estudiar leyes”, estás aquí buscando información, claridad y, por qué no, algo de humor.
Hoy vamos a explicar esos famosos estándares WCAG 2.2 ("Pautas de Accesibilidad para el Contenido Web 2.2") de forma clara para que sepas si tu web se adapta a ellos o si vas a tener que recurrir a nuestro equipo de diseño web para hacer los cambios necesarios. Por qué te vamos a explicar todo esto, pues porque el 28 de junio de 2025 entró en vigor la Ley Europea de Accesibilidad (EAA) que obliga a que sitios web, apps y servicios digitales sean inclusivos para todos.

Cumplir con la normativa europea para un diseño inclusivo

Primero, contextualicemos: la EAA no es un capricho burocrático, sino una necesidad para la inclusión digital (algo que, además, defendemos sin ambigüedades en digitalDot).

Afecta a empresas, tiendas online, blogs y cualquier servicio online que opere en la UE. Según estimaciones, más de 100 millones de europeos viven con alguna discapacidad, y excluirlos, además de ser injusto, es contraproducente: pierdes clientes potenciales y te expones a sanciones que pueden llegar a los miles de euros.
El WCAG 2.2, desarrollado por el W3C (World Wide Web Consortium), marca las directrices de la accesibilidad. Se organiza en varios principios clave: Perceivable (Perceptible), Operable (Operable), Understandable (Comprensible) y Robust (Robusto).

Cada principio tiene guías y criterios de éxito en niveles A (básico), AA (intermedio, el mínimo recomendado por la EAA para la mayoría de casos) y AAA (avanzado, para expertos).
A lo largo de este post, te daré consejos prácticos, ejemplos de código y herramientas gratuitas. Usaremos HTML, CSS y un poco de JavaScript, asumiendo que trabajas con CMS como WordPress, pero aplicable a cualquier framework.

Los Cuatro Jinetes de la accesibilidad web

Como ya te he comentado las WCAG 2.2 se basan en cuatro principios fundamentales que todo diseñador (o dueño de web) debería conocer.

Principio 1: Perceptible - "Que se vea y que se oiga"

Este principio se centra en que la información y los componentes de interfaz deben presentarse de formas que los usuarios puedan percibir, sin depender sólo de la vista o el oído. Para los diseñadores web, es clave porque afecta elementos básicos como imágenes, videos y colores. A continuación, se incluyen los criterios de nivel A, AA y AAA para este principio.

Guía 1.1: Alternativas textuales

No todo el mundo ve las imágenes, así que proporciona texto alternativo (alt text) para contenido no textual.

• Criterio 1.1.1 Contenido no textual (Nivel A): Todo elemento no textual necesita un equivalente textual. Por ejemplo, para una imagen en un ecommerce: <img src="zapatillas.jpg" alt="Zapatillas deportivas azules, talla 40, con cordones blancos">. Si es decorativa, usa alt="".
• Criterio 1.1.1 (Nivel AA): Asegúrate de que el texto alternativo sea claro y específico, especialmente para elementos interactivos como botones con íconos: <button><img src="lupa.png" alt="Buscar en el sitio"></button>.
• Criterio 1.1.1 extendido (Nivel AAA): Proporciona descripciones largas para contenido complejo, como gráficos. Usa aria-describedby para vincular a un texto detallado: <img src="grafico.jpg" alt="Gráfico de ventas 2025" aria-describedby="desc-grafico"><div id="desc-grafico">Gráfico de barras mostrando aumento de ventas del 20% en Q1</div>

Consejo: Usa herramientas como WAVE o Lighthouse de Chrome para chequear alt texts.

Guía 1.2: Medios temporales

Para audios y videos, ofrece alternativas.

• Criterio 1.2.1 Audio y video solo (pregrabado) (Nivel A): Proporciona transcripciones para audio y video.
• Criterio 1.2.2 Subtítulos (pregrabado) (Nivel A): Añade subtítulos a videos. Usa herramientas como YouTube o Amara.
• Criterio 1.2.4 Subtítulos (en vivo) (Nivel AA): Subtítulos en tiempo real para streams, con software como Otter.ai.
• Criterio 1.2.5 Audiodescripción (pregrabado) (Nivel AA): Describe acciones visuales en videos, por ejemplo, "Persona caminando en un parque soleado".
• Criterio 1.2.3, 1.2.7, 1.2.8 (Nivel AAA): Ofrece audiodescripción para todo contenido pregrabado, subtítulos extendidos (con pausas) y alternativas textuales completas para videos, como transcripciones detalladas con contexto visual.

Ejemplo: Para un video corporativo, sube una transcripción en TXT y usa <track kind="captions" src="subtitulos.vtt" srclang="es">.

Guía 1.3: Adaptable

El contenido debe presentarse sin perder estructura.

• Criterio 1.3.1 Información y relaciones (Nivel A): Usa HTML semántico: <h1>para títulos, <ul>para listas, <label for="email">Email:</label><input id="email" type="text">.
• Criterio 1.3.2 Secuencia significativa (Nivel A): Asegura que el orden del contenido sea lógico al leerse con un lector de pantalla.
• Criterio 1.3.3 Características sensoriales (Nivel A): No dependas solo de instrucciones sensoriales como "Haz clic en el botón verde".
• Criterio 1.3.4 Orientación (Nivel AA): Soporta responsive design con media queries para que el contenido sea accesible en cualquier orientación (vertical u horizontal).
• Criterio 1.3.5 Identificar propósito de entrada (Nivel AA): Usa autocomplete="email" en formularios para facilitar el autocompletado.
• Criterio 1.3.6 Propósito de cada componente (Nivel AAA): Identifica el propósito de cada componente de interfaz con atributos ARIA, como role="search" para un buscador.

Consejo: Valida tu HTML con W3C Validator.

Guía 1.4: Distinguible

Separa foreground de background.

• Criterio 1.4.1 Uso del color (Nivel A): No confíes sólo en el color. Ejemplo: <span style="color:rojo">Error: Campo requerido</span>.
• Criterio 1.4.2 Control de audio (Nivel A): Añade controles para pausar o detener audio que se reproduce automáticamente.
• Criterio 1.4.3 Contraste mínimo (Nivel AA): Ratio 4.5:1 para texto normal y 3:1 para texto grande. Usa WebAIM Contrast Checker.
• Criterio 1.4.4 Redimensionar texto (Nivel AA): Usa rem o em en CSS para permitir zoom hasta 200% sin pérdida de funcionalidad.
• Criterio 1.4.5 Imágenes de texto (Nivel AA): Evita usar imágenes de texto, salvo en logotipos o casos esenciales.
• Criterio 1.4.10 Reflujo (Nivel AA): Asegura que el contenido no requiera desplazamiento en dos dimensiones al aumentar el tamaño del texto.
• Criterio 1.4.11 Contraste no textual (Nivel AA): Ratio 3:1 para gráficos y elementos de interfaz, como bordes de botones.
• Criterio 1.4.12 Espaciado de texto (Nivel AA): Permite personalización de espaciado (líneas, palabras) sin romper el diseño: line-height: 1.5; letter-spacing: 0.12em;.
• Criterio 1.4.13 Contenido al pasar el ratón o enfocar (Nivel AA): Asegura que el contenido que aparece al pasar el ratón (como tooltips) sea desechable, persistente y accesible por teclado.
• Criterio 1.4.6, 1.4.8, 1.4.9 Contraste mejorado (Nivel AAA): Contraste mejorado (7:1 para texto normal, 4.5:1 para texto grande), permite personalización avanzada de espaciado, y prohíbe imágenes de texto incluso en casos esenciales, salvo logotipos.

Dicho para que se entienda: Mantén un nivel adecuado de contraste entre el fondo y el texto, con un ratio mínimo recomendado de 4.5:1. Sí, sabemos que tu cliente quiere texto gris claro sobre fondo gris más claro porque "se ve muy minimalista", pero el minimalismo no debe incluir hacer invisible el contenido.

Principio 2: Operable - Navegación fácil, sin trampas

Aquí entramos en cómo los usuarios interactúan con tu sitio. Debe ser operable con teclado, mouse o voz, sin límites de tiempo que estresen.

Guía 2.1: Accesible por teclado

Todo debe funcionar sin mouse. Algunos usuarios navegan exclusivamente con teclado, y tu web debe soportar esto sin convertirse en un videojuego de plataformas donde hay que hacer combos imposibles para llegar al botón de compra.

• Criterio 2.1.1 Teclado (Nivel A): Todo funcional con teclado. Usa :focus {outline: 2px solid #0055FF;}.
• Criterio 2.1.4 Atajos de teclado (Nivel A): Evita atajos de un solo carácter.
• Criterio 2.1.3 (Nivel AAA): Asegura que todas las funciones sean accesibles por teclado sin excepciones, incluso en interacciones complejas como drag-and-drop.

Guía 2.2: Tiempo suficiente

Da tiempo para leer y usar. Si tu sitio tiene temporizadores, asegúrate de que los usuarios tengan tiempo suficiente para completar tareas. No todos pueden llenar un formulario a la velocidad de la luz.

• Criterio 2.2.1 Tiempo ajustable (Nivel A): Permite extender sesiones, como en un carrito de compras con un botón "Extender sesión".
• Criterio 2.2.2 Pausa, detención, ocultación (Nivel A): Proporciona controles para pausar o detener contenido en movimiento, como carruseles.
• Criterio 2.2.6 Tiempo accesible (Nivel AAA): Sin límites de tiempo salvo por seguridad, y permite pausar o reautenticar sin pérdida de datos.

Consejo: Usa JavaScript para pausar carruseles: document.getElementById('carousel').setAttribute('aria-hidden', 'true');.

Guía 2.3: Convulsiones y reacciones físicas

Evita flashes que causen epilepsia.

• Criterio 2.3.1 Tres flashes o por debajo del umbral (Nivel A): Limita flashes a menos de 3 por segundo.
• Criterio 2.3.3 Animación por interacción (Nivel AAA): Permite desactivar animaciones no esenciales, como transiciones decorativas, mediante preferencias del usuario (prefers-reduced-motion en CSS).

Ejemplo CSS: @media (prefers-reduced-motion: reduce) { .animation { animation: none; } }.

Guía 2.4: Navegable

Facilita encontrar y navegar.

• Criterio 2.4.1 Evitar bloques (Nivel A): Añade skip links: <a href="#main" class="skip-lin">Saltar al contenido</a>
• Criterio 2.4.2 Títulos de página (Nivel A): <title>Tienda - Inicio</title>
• Criterio 2.4.3 Orden del foco (Nivel A): Asegura un orden lógico de navegación con el teclado.
• Criterio 2.4.4 Propósito de enlaces (Nivel A): Enlaces claros: <a href="...">comprar zapatillas</a>
• Criterio 2.4.5 Múltiples formas (Nivel AA): Ofrece varias formas de navegar, como menús, búsqueda o sitemap.
• Criterio 2.4.6 Encabezados y etiquetas (Nivel AA): Usa encabezados descriptivos (<h2>Productos destacados</h2>) y etiquetas claras.
• Criterio 2.4.7 Foco visible (Nivel AA): Mejora el foco visual: :focus { outline: 2px solid #0055FF; }.
• Criterio 2.4.11 Foco no oculto (Nivel AA): Asegura que el foco del teclado sea siempre visible, incluso en elementos personalizados.
• Criterio 2.4.12 Indicador de foco (Nivel AA): Proporciona un indicador claro de foco, como un borde grueso o cambio de color.
• Criterio 2.4.13 Apariencia del foco (Nivel AA): Garantiza que el indicador de foco sea consistente y distinguible en todo el sitio.
• Criterio 2.4.8 Ubicación (Nivel AAA): Proporciona ubicación clara (como breadcrumbs: <nav aria-label="breadcrumb">)
• Criterio 2.4.10 Títulos de sección (Nivel AAA): Usa títulos específicos para cada sección.

Consejo: Prueba la navegación con teclado en diferentes navegadores.

Guía 2.5: Modalidades de entrada

Soporta toques, voz, etc.

• Criterio 2.5.3 Etiqueta en nombre (Nivel A): Labels coinciden con nombres visuales.
• Criterio 2.5.7 Movimientos de arrastre (Nivel AA): Proporciona alternativas a gestos de arrastre, como botones para mover elementos.
• Criterio 2.5.8 Tamaño del objetivo (Nivel AA): Asegura que los elementos interactivos tengan un tamaño mínimo de 24x24 píxeles.
• Criterio 2.5.5 Tamaño del objetivo (mejorado) (Nivel AAA): Usa áreas de toque grandes (mínimo 44x44 píxeles).
• Criterio 2.5.6 Mecanismos de entrada concurrentes (Nivel AAA): Evita interacciones específicas de dispositivos (como gestos multitáctiles complejos).

Principio 3: Comprensible – Contenido claro y predecible

El contenido debe ser legible y comprensible, con interfaces predecibles. Déjate a Kant para tus amigos los filósofos y evita el lenguaje complejo. Si puedes decir algo en cinco palabras, no uses cincuenta. Los usuarios no tienen tiempo para descifrar tu prosa kantiana mientras intentan comprar unos calcetines online.

Guía 3.1: Legible

• Criterio 3.1.1 Idioma de la página (Nivel A): <html lang="es">
• Criterio 3.1.2 Idioma de partes (Nivel AA): <span lang="en">English text</span>
• Criterio 3.1.3, 3.1.4, 3.1.5 (Nivel AAA): Define términos inusuales (<abbr title="World Wide Web Consortium">W3C</abbr>) abrevia expansiones y usa un nivel de lectura simple (máximo secundaria).

Consejo: Usa herramientas como Hemingway para simplificar textos.

Guía 3.2: Predecible

• Criterio 3.2.1 Al foco (Nivel A): No cambies contexto al enfocar.
• Criterio 3.2.4 Identificación consistente (Nivel AA): Iconos consistentes.
• Criterio 3.2.5 (Nivel AAA): Evita cambios de contexto no iniciados por el usuario, como pop-ups automáticos.

Guía 3.3: Asistencia en la entrada

Ayuda en forms.

• Criterio 3.3.1 Identificación de errores (Nivel A): <div role="alert">Email inálido</div>
• Criterio 3.3.2 Etiquetas o instrucciones (Nivel A): Usa placeholders.
• Criterio 3.3.5, 3.3.6 (Nivel AAA): Proporciona ayuda contextual (como tooltips) y corrige errores automáticamente cuando sea posible.

Consejo: Usa ARIA para errores: aria-invalid="true"

Principio 4: Robusto – Compatible con tecnologías actuales y futuras

Tu código debe ser lo suficientemente sólido para funcionar con diferentes tecnologías y navegadores. Los temas accessibility-ready y plugins compatibles, diseñados para cumplir con los estándares internacionales, contribuyen a la compatibilidad con tecnologías asistivas y un marcado semántico adecuado.

Guía 4.1: Compatible

• Criterio 4.1.1 Análisis sintáctico (Nivel A): Código HTML válido.
• Criterio 4.1.2 Nombre, rol, valor (Nivel A): Usa ARIA: <button role="button" aria-pressed="false">Activar</button>
• Criterio 4.1.3 Mensajes de estado (Nivel AA): Notifica cambios: aria-live="polite"
• Criterio 4.1.3 extendido (Nivel AAA): Asegura que los mensajes de estado sean extremadamente claros, con prioridad alta para cambios críticos (aria-live="assertive")

Consejo: Valida con W3C Validator. Integra accesibilidad en tu stack: usa frameworks como React con plugins a11y.

Indicaciones para aplicar WCAG 2.2 en tu web:

El arte del diseño responsive y accesible

El acceso a internet a través de dispositivos móviles supuso el 59.32% del tráfico web mundial en julio de 2025, así que si tu web no funciona en móvil, básicamente estás perdiendo más de la mitad de tu audiencia. Pero el diseño responsive accesible va más allá:

• Áreas táctiles amplias: Los botones y enlaces deben ser lo suficientemente grandes para ser tocados cómodamente. La regla general es que tengan al menos 44x44 píxeles. Si tus botones son más pequeños, estás básicamente creando un juego de destreza involuntario.
• Gestos alternativos: No todo el mundo es un ninja táctil, ofrece alternativas a gestos complejos.

Lo nuevo en WCAG 2.2

Si ya conocías WCAG 2.1, WCAG 2.2 añade 9 nuevos criterios clave, sin romper compatibilidad. Aquí un resumen:

• Focus Not Obscured (Mínimo y Mejorado): No dejes el foco de teclado oculto tras banners o pop ups. ¡No seas así!
• Focus Appearance (AAA): El foco debe verse clarito y con contraste. No es una fiesta de invisibilidad.
• Dragging Movements: No pidas a tu usuario mover cosas arrastrándolas a lo loco; háblale suavemente.
• Target Size (Mínimo): Asegura que botones y enlaces tengan el tamaño suficiente para tocar sin problemas.
• Consistent Help: Ayudas y errores deben verse siempre en el mismo lugar.
• Redundant Entry: No hagas que el usuario escriba lo mismo dos veces sin necesidad.
• Autenticación accesible: Login y acceso deben ser fáciles de usar, sin tornados visuales ni pruebas Jedi para demostrar que “no soy robot”.

Herramientas para comprobar la accesibilidad

A continuación te dejamos algunas herramientas que te pueden ser útiles para saber si el diseño y estructura de tu web cumple con la normativa de accesibilidad.

Herramientas de análisis de contraste

• WebAIM Contrast Checker: Tu mejor amigo para verificar ratios de contraste.
• Colour Contrast Analyser: Para los más técnicos.
• Browser DevTools: La mayoría ya incluyen verificadores de contraste integrado.

Herramientas de navegación por teclado

• WAVE: Evalúa la accesibilidad general de tu sitio.
• axe DevTools: Una extensión del navegador que detecta problemas de accesibilidad.
• Lighthouse

Beneficios de crear diseños web accesibles

Te da puntos de karma, algo imprescindible para tu evolución espiritual. Si eres más terrenal, también tendrás beneficios.

Cumplir con la EAA y WCAG 2.2 te evitará multas y mejorará el SEO, reduce el rebote y amplía tu audiencia. En digitalDot, hemos visto clientes duplicar su tráfico tras implementar accesibilidad.

Beneficios de negocio

Mayor audiencia potencial:

• Acceso a los 87 millones de personas con discapacidad en la UE.
• Ampliación del mercado objetivo en un 15-20%.
• Inclusión de usuarios temporalmente limitados (lesiones, situaciones específicas).
• Mejor experiencia para usuarios de edad avanzada (mercado en crecimiento).

Ventaja competitiva:

• Diferenciación frente a competidores que no cumplen normativas.
• Posicionamiento como marca inclusiva y socialmente responsable.
• Acceso preferente a contratos públicos que requieren accesibilidad.
• Cumplimiento proactivo antes que la competencia.

Retorno de inversión:

• Mayor tasa de conversión por mejor usabilidad general
• Reducción de costes de soporte técnico
• Menor necesidad de rediseños posteriores
• Ahorro en adaptaciones futuras obligatorias

Beneficios Legales y de cumplimiento

Protección legal:

• Cumplimiento con la Ley Europea de Accesibilidad (EAA).
• Evitación de sanciones de hasta 1 millón de euros.
• Protección ante demandas por discriminación.
• Alineación con normativas nacionales de accesibilidad.

Preparación para auditorías:

• Documentación clara del cumplimiento normativo.
• Evidencia de buenas prácticas implementadas.
• Facilidad para superar inspecciones oficiales.
• Reducción de riesgos regulatorios.

Beneficios técnicos y de SEO

Mejor posicionamiento en buscadores:

• Estructura semántica que Google valora positivamente.
• Contenido mejor indexado por motores de búsqueda.
• Velocidad de carga optimizada.
• Compatibilidad móvil mejorada (factor SEO crucial).

Código más limpio:

• HTML semánticamente correcto y estructurado.
• CSS más organizado y eficiente.
• JavaScript más robusto y compatible.
• Facilidad para futuras actualizaciones y mantenimientos.

Compatibilidad:

• Funcionamiento correcto en todos los navegadores.
• Soporte para tecnologías asistivas.
• Adaptación automática a diferentes dispositivos.
• Resistencia a cambios tecnológicos futuros.

Beneficios de experiencia de usuario

Usabilidad mejorada para todos:

• Navegación más intuitiva y lógica.
• Contenido mejor estructurado y comprensible.
• Interacciones más claras y predecibles.
• Reducción de la curva de aprendizaje.

Performance optimizado:

• Tiempos de carga más rápidos.
• Menor consumo de datos móviles.
• Mejor rendimiento en dispositivos de gama baja.
• Experiencia fluida en conexiones lentas.

Flexibilidad de uso:

• Funcionalidad completa solo con teclado.
• Soporte para múltiples métodos de navegación.
• Adaptación a preferencias personales del usuario.
• Uso efectivo en diferentes contextos y situaciones.

Beneficios de reputación y marca

Imagen corporativa reforzada:

• Demostración de responsabilidad social corporativa.
• Posicionamiento como empresa inclusiva y moderna.
• Mejora de la percepción pública de la marca.
• Alineación con valores de diversidad e inclusión.

Credibilidad y confianza:

• Mayor confianza de usuarios con necesidades específicas.
• Percepción de profesionalidad y cuidado por el detalle.
• Recomendaciones positivas y marketing boca a boca.
• Fidelización de clientes por valores compartidos.

Si quieres apuntarte a todos estos beneficios no dejes que tu sitio web sea un club exclusivo: hazlo accesible para todos y cumple con la normativa europea.

En digitalDot, somos expertos en adaptar webs al WCAG 2.2, desde auditorías hasta implementación completa, para que evites multas y llegues a más usuarios. Contacta hoy con nuestro equipo de diseño y desarrollo web para un análisis de accesibilidad. ¡Transforma tu web en un espacio inclusivo y prepárala para el futuro!

Preguntas frecuentes sobre accesibilidad web