Auditoría de accesibilidad web: guía completa
Aprende qué es una auditoría de accesibilidad, cómo realizarla paso a paso con metodología WCAG 2.2, qué herramientas usar y cómo documentar tus hallazgos en un informe profesional.
¿Qué es una auditoría de accesibilidad web?
Una auditoría de accesibilidad es un proceso estructurado para identificar barreras que impiden el acceso de las personas usuarias a una página o aplicación web. Se trata de una serie de pruebas realizadas por un especialista para encontrar todos los problemas de accesibilidad, documentarlos en un informe y entregar las soluciones al equipo que los va a corregir.
Cuando una empresa decide implementar accesibilidad por primera vez en un producto ya existente, necesita saber cuál es el estado inicial de su aplicación: qué está haciendo bien, qué está haciendo mal y, una vez identificados todos los problemas, crear un plan de acción para resolverlos.
¿Por qué necesitas una auditoría?
Las auditorías de accesibilidad son el punto de partida para cualquier estrategia de accesibilidad. Sin ellas, es imposible saber qué problemas tiene tu producto digital y cómo priorizar las correcciones.
- Cumplimiento legal
La Directiva Europea de Accesibilidad (EAA), la norma EN 301 549 y el Real Decreto 193/2023 en España exigen que los productos y servicios digitales sean accesibles. El incumplimiento puede tener consecuencias legales.
- Alcanzar a más personas
Más del 15% de la población mundial tiene algún tipo de discapacidad. Una web no accesible excluye directamente a estas personas.
- Mejorar la experiencia de todos los usuarios
Los subtítulos ayudan en ambientes ruidosos, un diseño con buen contraste se lee mejor al sol, la navegación por teclado es clave para la eficiencia. La accesibilidad mejora la UX para todos.
- Calidad del código
Un HTML semántico y bien estructurado no solo es accesible, también es mejor para SEO, mantenimiento y rendimiento.
Tipos de pruebas de accesibilidad
No existe un solo tipo de prueba de accesibilidad. Para una auditoría completa, necesitas combinar distintos enfoques que se complementan entre sí.
Pruebas automáticas
Herramientas que escanean tu web y detectan errores de forma automática. Pueden encontrar entre el 30-40% de los problemas: contrastes de color insuficientes, imágenes sin texto alternativo, etiquetas HTML incorrectas. Son rápidas, pero no pueden evaluar la experiencia real del usuario.
Pruebas manuales
Un especialista navega el sitio usando teclado, lectores de pantalla (NVDA, VoiceOver, TalkBack) y otras tecnologías asistivas. Permite detectar problemas que las herramientas automáticas no pueden: orden de lectura incorrecto, foco invisible, interacciones rotas o texto confuso.
Pruebas con personas usuarias
Personas con discapacidad reales interactúan con tu producto. Esto permite descubrir barreras que ni las herramientas ni los expertos pueden anticipar, especialmente en flujos complejos como registros, checkouts o formularios largos.
Herramientas y extensiones
Para realizar una auditoría de accesibilidad necesitarás varias herramientas. Estas son las más utilizadas por profesionales.
Escáneres automáticos
- axe DevTools
Extensión de navegador de Deque. Escanea toda la página y ofrece descripciones detalladas de los errores con referencias WCAG.
- Lighthouse
Integrada en Chrome DevTools. Tiene una sección de accesibilidad que revisa criterios WCAG básicos y da una puntuación.
- WAVE
Extensión que superpone indicadores visuales directamente en la página para señalar errores y alertas.
Extensiones útiles
- WCAG Colour Contrast Checker
Identifica combinaciones de color que no cumplen con los ratios mínimos de contraste WCAG.
- HeadingsMap
Muestra la estructura de encabezados de la página en una vista jerárquica. Fundamental para verificar que la jerarquía es lógica.
- Web Developer Toolbar
Permite desactivar CSS, mostrar alt text de imágenes, resaltar etiquetas semánticas y más.
- Colorzilla
Eyedropper para extraer colores de cualquier elemento de la página, incluyendo imágenes, y verificar contrastes manualmente.
Tecnologías asistivas para testing
- NVDA (Windows)
Lector de pantalla gratuito y open source. Es el más utilizado para testing de accesibilidad en entornos Windows.
- VoiceOver (macOS / iOS)
Lector de pantalla integrado en todos los dispositivos Apple. Esencial para probar accesibilidad en Safari y dispositivos móviles iOS.
- TalkBack (Android)
Lector de pantalla de Android integrado. Necesario para verificar la accesibilidad de apps y webs en dispositivos Android.
El proceso de auditoría paso a paso
Una auditoría de accesibilidad sigue un proceso estructurado. Estos son los pasos que debes seguir para que tu auditoría sea completa y profesional.
Definir el alcance
Antes de empezar, define exactamente qué vas a auditar: qué páginas, qué flujos de usuario y contra qué nivel de WCAG (A, AA o AAA). El alcance queda documentado en el informe para que el cliente sepa exactamente qué se evaluó. Es habitual auditar las páginas más visitadas y los flujos críticos (registro, login, checkout, búsqueda).
Análisis automático
Ejecuta los escáneres automáticos (axe DevTools, Lighthouse) en cada página del alcance. Documenta los errores encontrados. Recuerda que estos escáneres solo detectan entre el 30-40% de los problemas, pero son un punto de partida rápido y eficiente.
Revisión con teclado
Navega toda la página usando solo el teclado (Tab, Shift+Tab, Enter, Escape, flechas). Verifica que puedes acceder a todos los elementos interactivos, que el foco es visible en todo momento y que el orden de tabulación es lógico. Si en algún punto no sabes dónde estás o no puedes interactuar con un elemento, eso es un error crítico.
Revisión con lector de pantalla
Activa NVDA (o VoiceOver) y navega la página como lo haría una persona ciega. Verifica que los encabezados tienen la jerarquía correcta, que las imágenes tienen textos alternativos adecuados, que los formularios están etiquetados y que la navegación se anuncia correctamente.
Verificación de contraste
Revisa que todos los textos cumplen los ratios de contraste mínimos: 4.5:1 para texto normal y 3:1 para texto grande. No confíes solo en los escáneres: verifica manualmente los estados hover, focus y los textos sobre imágenes.
Inspección del HTML
Abre las DevTools del navegador y revisa que se están usando etiquetas semánticas: header, nav, main, footer. Comprueba que los div genéricos no están reemplazando etiquetas con significado. Verifica que los enlaces de imagen tienen alt text descriptivo y que las listas de navegación son realmente listas en el HTML.
Documentar en el informe
Para cada error encontrado, documenta: descripción del problema, criterio WCAG violado, severidad (alta, media, baja), pasos para reproducir, captura de pantalla y recomendación de solución. Agrupa los errores por vista/página.
Evaluación manual en detalle
La evaluación manual es la parte más importante de cualquier auditoría. Es donde un especialista simula la experiencia real de personas con distintas discapacidades.
Navegación con teclado
Muchas personas no pueden usar un ratón: personas con discapacidades motrices, personas ciegas que usan lector de pantalla, o usuarios avanzados que prefieren el teclado. Por eso, toda web debe ser completamente operable con las teclas Tab, Enter, Escape y flechas.
El indicador de foco (focus indicator) es esencial: si el usuario no puede ver dónde está el foco, la página es inutilizable. Es uno de los errores más graves y más comunes que encontrarás.
Validación con lectores de pantalla
El lector de pantalla no ve tu web. Lee el HTML para convertirlo en audio. Esto significa que si tu HTML no es semántico, el lector de pantalla no podrá comunicar la información correctamente.
Los encabezados (headings) son como el índice de un periódico para una persona ciega: le permiten escanear la página y saltar directamente a la sección que le interesa. Si los encabezados están mal estructurados o no existen, esa persona tiene que escuchar toda la página linealmente para encontrar lo que busca.
Imágenes y texto alternativo
Hay dos tipos principales de imágenes: decorativas e informativas. Las decorativas deben tener un atributo alt vacío (alt="") para que el lector de pantalla las ignore. Las informativas necesitan un alt descriptivo que comunique la misma información que la imagen transmite visualmente.
Una imagen sin atributo alt es siempre un error crítico, independientemente del contexto. Y un enlace con imagen que diga "social" en lugar de "Facebook" deja al usuario sin información para decidir si hacer clic.
Contraste de color
Los escáneres automáticos detectan los problemas de contraste más evidentes, pero pasan por alto los estados hover, el foco de formularios y los textos sobre imágenes. Para estos casos, necesitas extraer manualmente los colores (con una herramienta como Colorzilla) y verificar en un contrast checker como el de WebAIM.
Etiquetas semánticas HTML
Toda página web debería tener una estructura base de etiquetas semánticas: header, nav, main y footer. Estas etiquetas permiten a los lectores de pantalla crear puntos de referencia (landmarks) para que el usuario pueda saltar directamente a la sección que necesita.
Si tu web usa div genéricos para todo, un usuario de lector de pantalla no tendrá forma de saber dónde está la navegación, dónde empieza el contenido principal o dónde está el footer.
¿Quieres aprender a hacer auditorías?
En nuestro curso de Auditorías de Accesibilidad aprenderás todo esto de forma práctica, con un proyecto real y la guía de profesores expertos.
Documentando el informe de auditoría
El informe es el entregable más importante de una auditoría. Un buen informe debe poder ser leído y comprendido por personas técnicas y no técnicas por igual.
Estructura del informe
Un informe profesional de auditoría incluye:
- Alcance: qué páginas y flujos se auditaron, contra qué estándar.
- Resumen ejecutivo: número total de problemas encontrados, desglosados por severidad.
- Tabla de issues (por página): cada problema con su severidad, criterio WCAG, pasos para reproducir, captura y recomendación.
Buenas prácticas al documentar
Sé descriptivo en texto siempre. Aunque pongas capturas de pantalla, incluye en texto plano los elementos afectados. Un compañero de equipo que use lector de pantalla podrá entender tu reporte.
Usa el texto exacto de la página en los pasos para reproducir. Así quien lea el informe puede usar Ctrl+F para encontrarlo.
Agrupa errores repetidos. Si 20 imágenes de producto tienen el mismo problema, no crees 20 issues. Describe el patrón y pon un ejemplo representativo.
No todos los issues necesitan captura. Si el error es la ausencia de algo visible (como un indicador de foco inexistente), describe el problema en texto. Es totalmente válido.
Escribe los pasos más simples posibles para reproducir cada problema. No asumas que quien lee el informe es un ingeniero senior.
Severidad de los issues
Alta
Bloqueante. El usuario no puede completar la tarea. Ejemplo: formulario imposible de enviar con teclado.
Media
Parcialmente bloqueante. El usuario puede completar la tarea, pero con una experiencia degradada y estrategias alternativas.
Baja
No bloqueante. La experiencia se degrada pero nadie queda excluido. Ejemplo: headings sin jerarquía lógica.
Cómo presentar los resultados
Tu trabajo como auditor no es solo técnico. También implica educar al equipo y comunicar los resultados de forma que motiven a la acción, no que generen parálisis.
Mejora continua: la accesibilidad no termina con la auditoría
El software está en constante cambio. Nuevas funcionalidades, actualizaciones de contenido, rediseños... Cada cambio puede introducir nuevos problemas de accesibilidad. Por eso, mantener la accesibilidad requiere un proceso continuo.
- Auditorías periódicas
Realiza auditorías regularmente. No hay una frecuencia fija — depende de cuánto cambia tu producto. Pero después de la primera auditoría, las siguientes serán más rápidas y baratas, porque solo tienes que evaluar lo que ha cambiado.
- Revisiones de diseño (design reviews)
Involucra a un especialista en accesibilidad cuando se diseñan nuevas interfaces. Arreglar un problema en un archivo de diseño es más rápido y barato que arreglarlo ya maquetado y desplegado.
- Integrar la accesibilidad en procesos y políticas
Documenta las buenas prácticas que el equipo va aprendiendo (contraste, alt text, headings, foco...) para que el contenido nuevo sea accesible desde su creación.
- Métricas de accesibilidad
Mide el comportamiento de los usuarios antes y después de las correcciones. Si las personas se atascan en algún flujo, puede ser una señal de una barrera de accesibilidad no detectada.
Normativa y legislación
Las auditorías de accesibilidad no existen en el vacío: hay un marco legal que exige que los productos digitales sean accesibles.
Directiva Europea de Accesibilidad (EAA)
Obliga a empresas que ofrecen productos y servicios digitales en la UE a cumplir con requisitos de accesibilidad. Aplica a e-commerce, banca online, transporte, telecomunicaciones y más.
EN 301 549 y WCAG 2.2
La norma EN 301 549 es el estándar europeo armonizado que referencia las WCAG. Al auditar contra WCAG 2.2 nivel AA, estás cubriendo los requisitos técnicos que exige la normativa.
Real Decreto 193/2023
Transpone la EAA al ordenamiento jurídico español. Establece los requisitos de accesibilidad para productos y servicios en el mercado español, con plazos y regímenes sancionadores específicos.
ADA y sección 508
En EE.UU., el Americans with Disabilities Act (ADA) y la sección 508 del Rehabilitation Act exigen accesibilidad digital, con un creciente número de demandas por incumplimiento.
Aprende auditorías de accesibilidad con weAAAre
Tenemos un curso asíncrono completo donde aprenderás todo esto de forma práctica: realizarás tu primera auditoría real, documentarás un informe profesional y aprenderás a comunicar los resultados. Además, contamos con un programa intensivo con clases en directo y proyecto final.