Un sitio web inaccesible excluye a más usuarios de los que parece. Las personas con discapacidad visual, motriz, auditiva o cognitiva representan entre el 15% y el 20% de la población mundial según la Organización Mundial de la Salud. Si tu web no puede usarse con un lector de pantalla, no puede navegarse con el teclado o sus contrastes son insuficientes, estás cerrando la puerta a una parte importante de tu público potencial.
La buena noticia es que la accesibilidad y una buena usabilidad general van casi siempre de la mano: lo que hace un sitio más fácil de usar para alguien con una discapacidad, también lo mejora para el resto. Aquí tienes los principios fundamentales y cómo aplicarlos.
Las WCAG: el estándar de referencia
Las Pautas de Accesibilidad para el Contenido Web (WCAG) son el marco que el W3C publica y actualiza periódicamente. La versión actual, WCAG 2.2, organiza los requisitos en cuatro principios conocidos como POUR: Perceptible, Operable, Comprensible y Robusto. Un sitio que cumpla el nivel AA puede considerarse accesible para la gran mayoría de usuarios.
En muchos países, cumplir las WCAG ya no es opcional para ciertos tipos de webs: administraciones públicas y grandes empresas ya tienen obligación legal, y la tendencia normativa va en esa dirección para el resto de sectores también.
Los cuatro principios POUR aplicados al diseño
Perceptible: que todos puedan ver (o escuchar) el contenido
Todo el contenido debe poder percibirse por al menos un sentido. Eso implica añadir texto alternativo descriptivo a las imágenes (no solo «imagen» o el nombre del archivo), incluir subtítulos en los vídeos y garantizar un contraste mínimo de 4,5:1 entre el texto y el fondo. Herramientas como el Colour Contrast Analyser te dan el ratio exacto en segundos.
Operable: que la navegación funcione sin ratón
Todos los elementos interactivos del sitio (menús, botones, formularios, modales) deben poder usarse con el teclado. Prueba tú mismo a navegar tu web solo con el tabulador y el enter: si en algún punto pierdes el foco visual o no puedes acceder a un elemento, tienes un problema de accesibilidad. Además, el contenido que se mueve o parpadea debe poder pausarse para no afectar a personas con epilepsia fotosensible.
Comprensible: lenguaje claro e instrucciones útiles
El texto debe estar en el idioma correcto declarado en el HTML (el atributo lang), los formularios deben tener etiquetas visibles (no solo placeholders que desaparecen al escribir) y los mensajes de error deben decir exactamente qué ha fallado y cómo solucionarlo. Nada de «Error en el formulario»: «El campo email no es válido. Usa el formato [email protected]».
Robusto: que funcione con tecnologías asistivas
El HTML debe estar bien formado y usar el marcado semántico correcto: encabezados jerarquizados (H1, H2, H3 en orden), roles ARIA solo cuando el HTML nativo no llega, y atributos como aria-label o aria-describedby para dar contexto a elementos que un lector de pantalla no puede inferir de forma automática. Un HTML desordenado puede verse bien visualmente pero ser completamente innavegable para alguien que usa NVDA o VoiceOver.
Beneficios más allá de la inclusión
La accesibilidad tiene un efecto positivo directo en el SEO. El uso correcto de alt text, la estructura de encabezados, el lenguaje claro y los formularios bien etiquetados son prácticas que los motores de búsqueda también valoran. No es casualidad que muchas de las recomendaciones de las WCAG coincidan con las guías de contenido orientado a mejorar el SEO.
Tampoco hay que olvidar el público mayor de 60 años, que usa webs con más frecuencia cada año y se beneficia especialmente de textos legibles, contrastes claros y navegación simple. Hacer el sitio accesible es, en muchos casos, hacer el sitio mejor para todos.
Herramientas para auditar la accesibilidad de tu web
Antes de hacer cambios, conviene saber dónde están los problemas. Estas herramientas te dan un diagnóstico rápido:
- WAVE (WebAIM): extensión de navegador gratuita que muestra los errores y advertencias de accesibilidad directamente sobre la página.
- axe DevTools: extensión de Chrome con diagnóstico automático alineado con las WCAG, muy usada por desarrolladores.
- Lighthouse: integrado en DevTools de Chrome, incluye una auditoría de accesibilidad con puntuación y recomendaciones.
- Pruebas con usuarios reales: ninguna herramienta automática detecta todos los problemas. Probar con personas que usen lectores de pantalla sigue siendo insustituible.
La accesibilidad web no es un proyecto que se termina en un sprint: es un criterio de calidad que se incorpora al proceso de diseño y desarrollo desde el principio. Cuanto antes se tiene en cuenta, menos costoso es aplicarlo y más natural resulta para el equipo.
Preguntas frecuentes
¿Qué nivel de las WCAG debo cumplir?
El nivel A es el mínimo, pero el nivel AA es el estándar real que se exige en la mayoría de normativas y el que se considera accesible para una audiencia amplia. El nivel AAA es el más estricto y no se exige de forma general, solo en contextos muy específicos.
¿La accesibilidad web tiene coste legal si no se cumple?
En España, la Ley 11/2023 transpone la Directiva Europea de Accesibilidad y exige el cumplimiento de las WCAG 2.1 nivel AA para webs y apps de entidades del sector público y determinadas empresas privadas. Las multas por incumplimiento pueden llegar a los 40.000 euros en los casos más graves.
¿Qué pasa si mi web está hecha con WordPress?
WordPress tiene una buena base de accesibilidad en su núcleo, pero muchos temas y plugins añaden elementos que no cumplen las WCAG. Es importante elegir un tema que declare compatibilidad con accesibilidad y revisar los plugins de formularios, sliders y pop-ups, que suelen ser los que más problemas generan.
¿Cuánto tiempo lleva hacer una web accesible?
Depende del estado de partida. Incorporar accesibilidad desde el inicio de un proyecto añade un 10-20% al tiempo de desarrollo. Adaptar una web existente con problemas graves puede ser mucho más costoso, especialmente si el tema base no es accesible y hay que rehacer partes del HTML o los estilos.
