Accesibilidad Web: Guía WCAG para Hacer tu Sitio Inclusivo y Legal

Accesibilidad Web: Más que una Buena Práctica, una Obligación Legal

La accesibilidad web es la práctica de diseñar y desarrollar sitios web que puedan ser usados por cualquier persona, independientemente de sus capacidades físicas, sensoriales o cognitivas. Esto incluye personas con discapacidad visual, auditiva, motora o cognitiva, pero también personas mayores, usuarios con conexiones lentas o condiciones temporales (un brazo roto, sol directo sobre la pantalla).

En España, 4,4 millones de personas tienen alguna discapacidad según el INE. Además, la población mayor de 65 años supera los 9 millones. La accesibilidad no es un nicho: es un mercado enorme.

Y desde la perspectiva legal, la accesibilidad ya no es opcional para muchos tipos de organizaciones.

El Marco Legal en España

Real Decreto 1112/2018

Transpone la Directiva Europea 2016/2102 sobre accesibilidad de los sitios web y aplicaciones para móviles de los organismos del sector público. Obliga a:

• •Organismos del sector público: Administraciones públicas, universidades públicas, hospitales públicos, etc. Deben cumplir WCAG 2.1 nivel AA desde 2020.
• •Empresas privadas con más de 100 trabajadores que presten servicios esenciales al público (electricidad, gas, agua, telecomunicaciones, transporte, seguros, banca): también obligadas.

Ley de Accesibilidad de 2003 (actualizada)

Establece que los sitios web que reciban financiación pública o presten servicios a la ciudadanía deben ser accesibles.

Ley Europea de Accesibilidad (EAA, Directiva 2019/882)

Atención: Desde junio de 2025, esta directiva obliga a las empresas privadas del sector privado que ofrecen productos y servicios en la UE a cumplir con estándares de accesibilidad. Esto incluye e-commerce, banca online, servicios de transporte, libros electrónicos y más.

Si tienes una tienda online que vende en la UE, la accesibilidad ya es una obligación legal.

WCAG: El Estándar Internacional

Las Web Content Accessibility Guidelines (WCAG) son el estándar internacional de referencia para accesibilidad web, desarrollado por el W3C. La versión vigente es WCAG 2.2 (octubre 2023).

Los 4 Principios POUR

Las WCAG se organizan en cuatro principios:

P — Perceptible: La información y los componentes de la interfaz deben presentarse de formas que los usuarios puedan percibir. Ejemplos: texto alternativo en imágenes, subtítulos en vídeos, suficiente contraste de color.

O — Operable: Los componentes de la interfaz y la navegación deben ser operables. Ejemplos: toda la funcionalidad accesible con teclado, sin contenido que destelle más de 3 veces por segundo, tiempo suficiente para leer y usar el contenido.

U — Comprensible: La información y el manejo de la interfaz deben ser comprensibles. Ejemplos: idioma de la página declarado, navegación consistente, mensajes de error descriptivos.

R — Robusto: El contenido debe ser suficientemente robusto para ser interpretado por una amplia variedad de agentes de usuario, incluyendo tecnologías de asistencia.

Los Tres Niveles de Conformidad

• •Nivel A: El mínimo. Sin esto, algunos usuarios no pueden usar el sitio en absoluto.
• •Nivel AA: El estándar legal requerido en España y la UE. La mayoría de webs debe apuntar a este nivel.
• •Nivel AAA: El más alto. Difícil de conseguir en su totalidad, pero algunos criterios son alcanzables.

Los 10 Errores de Accesibilidad Más Comunes

Según el informe anual de WebAIM sobre el millón de webs más visitadas, estos son los errores más frecuentes:

1. Bajo contraste de texto (85,2% de webs con al menos un error)

El contraste entre el texto y el fondo debe ser al menos 4,5:1 para texto normal y 3:1 para texto grande (>18px o >14px en negrita).

Herramienta: WebAIM Contrast Checker (webaim.org/resources/contrastchecker/)

Caso frecuente: Texto gris claro sobre fondo blanco, tan de moda en diseño minimalista, frecuentemente incumple WCAG.

2. Falta de texto alternativo en imágenes (54,5% de webs)

Toda imagen que transmite información debe tener un atributo alt descriptivo: ```html

```

3. Links sin descripción significativa (50,8% de webs)

"Haz clic aquí", "Más información", "Leer más" son problemas para usuarios de lectores de pantalla que navegan por links.

html
<!-- Incorrecto -->
<a href="/blog/ia">Leer más</a>

<!-- Correcto -->
<a href="/blog/ia">Leer más sobre inteligencia artificial para empresas</a>

4. Formularios sin etiquetas (47,8% de webs)

Cada campo de formulario debe tener una etiqueta asociada: ```html

Email ```

5. Falta de encabezados jerárquicos (40,4% de webs)

Los encabezados (H1, H2, H3...) deben seguir una jerarquía lógica. No uses H3 después de H1 saltándote H2. No uses encabezados solo por el tamaño visual: usa CSS para el tamaño.

6. No accesible con teclado

Toda la funcionalidad debe ser accesible con solo el teclado (Tab, Enter, flechas, Escape). Los menús desplegables, modales y carruseles frecuentemente fallan en esto.

Test rápido: Abre tu web, desconecta el ratón, navega solo con Tab. ¿Puedes hacer todo lo que necesitas?

7. Sin indicador de foco visible

Cuando el usuario navega con teclado, el elemento activo debe tener un indicador visual claro. Muchos diseños eliminan el outline CSS (:focus { outline: none; }) por razones estéticas, dejando a los usuarios de teclado sin orientación.

Solución: Mantén el outline o diseña un indicador de foco personalizado visualmente atractivo.

8. Tablas sin estructura correcta

Las tablas de datos deben usar para encabezados, scope para indicar si el encabezado es de fila o columna, y caption para el título:

html
<table>
  <caption>Precios de planes mensuales</caption>
  <tr>
    <th scope="col">Plan</th>
    <th scope="col">Precio</th>
    <th scope="col">Usuarios</th>
  </tr>
  ...
</table>

9. Vídeos sin subtítulos o transcripción

Los vídeos con audio deben tener subtítulos (WCAG 2.1 nivel A) y se recomienda transcripción completa (nivel AA).

10. Idioma de la página no declarado

El atributo lang en el HTML es obligatorio para que los lectores de pantalla pronuncien correctamente: ``html ``

Cómo Auditar tu Web de Accesibilidad

Herramientas automáticas (rápido pero incompleto)

• •WAVE (wave.webaim.org): Extensión de navegador gratuita que detecta errores visualmente.
• •axe DevTools: Extensión Chrome/Firefox para análisis técnico detallado.
• •Lighthouse: Incluido en Chrome DevTools, incluye auditoría de accesibilidad.
• •Siteimprove: Plataforma completa de accesibilidad (SaaS de pago).

Importante: Las herramientas automáticas detectan solo el 30-40% de los errores de accesibilidad. La evaluación completa requiere pruebas manuales y con usuarios con discapacidad.

Pruebas manuales esenciales

1. 1.Navegar solo con teclado: Verifica que todo es accesible y el foco visible
2. 2.Activar un lector de pantalla: NVDA (Windows, gratuito) o VoiceOver (Mac/iOS, incluido). Navega tu web y escucha cómo suena.
3. 3.Zoom al 200%: El contenido debe seguir siendo legible y usable
4. 4.Modo de alto contraste del sistema operativo: Verifica que la interfaz sigue siendo usable

Impacto en SEO

La accesibilidad web y el SEO están profundamente relacionados:

• •El texto alternativo de imágenes es leído por los buscadores igual que por los lectores de pantalla
• •La estructura de encabezados H1-H6 organiza el contenido para buscadores y usuarios de asistencia
• •La velocidad de carga (necesaria para accesibilidad) es también factor de ranking
• •El contraste de color no afecta SEO directamente, pero sí la tasa de rebote (usuarios que abandonan por dificultad de lectura)

Una web accesible tiende a tener mejor SEO, y viceversa.

Cómo Implementar la Accesibilidad en un Proyecto Nuevo

Desde el diseño: Elige una paleta de colores con contraste suficiente. Define estilos de foco visibles. Diseña componentes considerando el teclado.

En el desarrollo: Usa HTML semántico (nav, main, article, section, footer en lugar de divs genéricos). Aplica ARIA solo cuando el HTML semántico no sea suficiente. Prueba con teclado durante el desarrollo.

En el contenido: Escribe textos alternativos descriptivos. Redacta links con contexto. Subtitula los vídeos.

En la revisión: Audita con WAVE y axe antes de lanzar. Realiza prueba manual de teclado y lector de pantalla.

Preguntas Frecuentes

¿Cuánto cuesta hacer una web accesible? Si se tiene en cuenta desde el principio del proyecto, el coste adicional es mínimo (5-15% más). Corregir una web ya desarrollada puede costar entre 2.000-10.000€ dependiendo de la complejidad.

¿Tengo obligación legal de cumplir WCAG si soy una PYME? Depende de tu actividad. Desde junio 2025 (EAA), la mayoría de empresas privadas que ofrecen servicios digitales al consumidor tienen obligaciones de accesibilidad. Consulta con un especialista para tu caso concreto.

¿La accesibilidad limita el diseño visual? No en absoluto. Las mayores marcas del mundo (Apple, Google, Microsoft) tienen webs accesibles y visualmente impecables. La accesibilidad no significa diseño feo; significa diseño bien pensado.

¿Quieres que tu web sea accesible y cumpla con la normativa vigente? En ROXEX realizamos auditorías de accesibilidad e implementamos WCAG en proyectos web.

Escríbenos por WhatsApp: https://wa.me/34644458637