Que es accesibilidad web
Es disenar y desarrollar sitios que puedan usar todas las personas, incluyendo aquellas con discapacidad visual, auditiva, motora o cognitiva. No es opcional, es necesario.
Por que tu pyme debe importarle
El 15 por ciento de la poblacion mundial tiene algun tipo de discapacidad. Excluirlos de tu sitio significa perder 1 de cada 7 potenciales clientes. Ademas, en muchos paises ya es obligacion legal.
Beneficios mas alla de la inclusion
- SEO: Google premia sitios accesibles
- Mayor audiencia potencial
- Mejor UX para todos los usuarios
- Cumplimiento legal preventivo
- Mejor imagen de marca
WCAG: el estandar
Web Content Accessibility Guidelines son el estandar internacional. Tienen tres niveles: A (basico), AA (recomendado), AAA (avanzado). La mayoria de paises exige nivel AA.
Cuatro principios basicos
1. Perceptible: el contenido debe poder percibirse de alguna manera (visual, auditiva, tactil).
2. Operable: la navegacion debe poder hacerse de varias formas (mouse, teclado, voz).
3. Comprensible: el contenido y operacion deben ser claros y predecibles.
4. Robusto: debe funcionar bien con tecnologias asistivas (lectores de pantalla, comandos de voz).
Checklist de lo mas importante
- Alt text en todas las imagenes
- Contraste suficiente texto/fondo (4.5:1 minimo)
- Tamano de fuente legible (16px minimo)
- Navegacion completa con teclado
- Subtitulos en videos
- Estructura semantica con H1, H2, etc.
- Formularios con labels claros
- Links descriptivos (no "click aqui")
- Foco visible al navegar con teclado
- Compatibilidad con lectores de pantalla
Imagenes accesibles
Cada imagen necesita alt text que describa su contenido y proposito. Las imagenes decorativas pueden tener alt="" para que lectores de pantalla las salteen.
Contraste de colores
Texto gris claro sobre fondo blanco es ilegible para muchas personas. Usar contrast checker (WebAIM tiene uno gratis) para verificar. Diferencia minima 4.5:1 para texto normal, 3:1 para texto grande.
Navegacion por teclado
Probar tu sitio sin mouse. Solo con tab, enter y flechas. Si no podes llegar a todo y operarlo, tenes problemas. Muchos usuarios solo usan teclado.
Videos y audio
Subtitulos en todos los videos. Transcripciones de audios. No solo por discapacidad auditiva tambien por contextos sin sonido o gente que prefiere leer.
Formularios accesibles
- Cada campo con label claro
- Mensajes de error descriptivos
- Indicar campos requeridos claramente
- Permitir tiempo suficiente para completar
- Confirmacion clara al enviar
Herramientas gratis para evaluar
- WAVE: evaluador online gratuito
- Lighthouse: dentro de Chrome DevTools
- axe DevTools: extension de Chrome
- Color Contrast Checker: WebAIM
- Lectores de pantalla: NVDA gratis para Windows
Cuanto cuesta hacer accesible
Si lo haces desde el diseno: minimo costo extra. Si tenes que adaptar despues: depende de la complejidad pero suele ser 10-30 por ciento del costo original del sitio.
Implementacion gradual
No tenes que hacer todo de una. Empezar por:
- Alt text en imagenes existentes
- Aumentar contraste de textos
- Mejorar estructura semantica
- Agregar subtitulos a videos
- Hacer navegacion teclado-friendly