Guía Práctica de Accesibilidad Web
La accesibilidad significa garantizar una web utilizable por todos: personas con discapacidad, personas mayores, usuarios móviles, conexiones lentas, brazo roto, entornos ruidosos, etc.
¿Por qué la accesibilidad?
Cuando diseñamos para la discapacidad, resolvemos problemas que todos encuentran
Los vados peatonales revolucionaron las ciudades para sillas de ruedas, pero también para todos los peatones con maletas, cochecitos o bicicletas.
Una mejora para algunos beneficia a todos. Este concepto, nacido de las rampas de acceso a la calle, se aplica perfectamente a la web.
Ejemplo típico de un vado peatonal
♿ Vados peatonales
Diseñado para : Usuarios de sillas de ruedas
También beneficia a : Padres con cochecitos, ciclistas, repartidores con carros, personas con maletas con ruedas, patinetas, patinetes, personas mayores
🎬 Subtítulos de video
Diseñado para : Personas sordas o con problemas de audición
También beneficia a : Ver videos en el metro, aprender un idioma extranjero, seguir una conferencia en un entorno ruidoso, entender acentos difíciles
⌨️ Navegación con teclado
Diseñado para : Personas que no pueden usar un ratón
También beneficia a : Desarrolladores usando atajos, usuarios con ratón roto, usuarios avanzados que prefieren el teclado, personas con el brazo en cabestrillo
📱 Control por voz de smartphones
Diseñado para : Personas ciegas y personas con discapacidades motoras
También beneficia a : Mensajería mientras se conduce, deportes con auriculares, manos ocupadas con herramientas, control remoto, multitarea en la oficina
🪥 Cepillo de dientes eléctrico
Diseñado para : Personas con movilidad reducida o artritis (1954)
También beneficia a : Mejor cepillado para todos, recomendado por dentistas, niños aprendiendo, personas cansadas, eficiencia superior comprobada
🎧 Audiolibros
Diseñado para : Personas ciegas (1932, American Foundation for the Blind)
También beneficia a : Conductores, corredores, multitarea, disléxicos, niños aprendiendo a leer, $1.3 mil millones en ventas en 2020
La accesibilidad no es una restricción, es innovación disfrazada.
Herramientas gratuitas para probar la accesibilidad
Estas herramientas te ayudan a identificar y corregir problemas de accesibilidad:
WAVE
Extensión del navegador que visualiza errores de accesibilidad directamente en tu página
axe DevTools
Extensión para desarrolladores integrada en DevTools, muy precisa y detallada
Lighthouse
Auditoría integrada en Chrome DevTools, incluye una puntuación general de accesibilidad
MDN Accessibility
Documentación de referencia completa sobre accesibilidad web
Colour Contrast Analyser
Aplicación gratuita para probar contrastes de color según WCAG
Accessibility Insights
Suite de herramientas de Microsoft para pruebas manuales y automatizadas en profundidad
Accessible Game Jam
Interactivo¡Pon a prueba tus conocimientos de accesibilidad web de forma interactiva! Un juego para aprender mientras te diviertes.
Lectores de pantalla comunes
Comprender los lectores de pantalla más utilizados para probar mejor tus interfaces:
NVDA
WindowsLector de pantalla gratuito y de código abierto, muy popular
JAWS
WindowsLector de pantalla profesional, líder histórico del mercado
VoiceOver
macOS/iOSLector de pantalla integrado en todos los dispositivos Apple
TalkBack
AndroidLector de pantalla predeterminado en Android
🧪 Cómo probar con un lector de pantalla
- Cierra los ojos o apaga la pantalla
- Navega solo con el teclado (Tab, flechas, Enter, Espacio)
- Escucha atentamente lo que se anuncia
- Verifica que todo sea comprensible sin ver la pantalla
Nota : 15 minutos de prueba con un lector de pantalla vale más que horas de auditoría automatizada.
Navegación rápida
Usa el menú lateral o estos atajos para explorar ejemplos: