Accesibilidad web: por qué hacer tu sitio para todos también es buen negocio
Una página accesible la usan más personas, funciona mejor en el celular y suele posicionarse mejor.
Por el equipo de Diskette Studio · · 6 min de lectura
Accesibilidad web significa que cualquier persona pueda usar tu sitio: quien no ve bien los colores, quien navega con teclado, quien usa un lector de pantalla, quien tiene una lesión temporal en la mano o quien simplemente está al sol con el brillo bajo. Es una mejora de diseño que beneficia a todos.
Por qué importa para un negocio
- Más clientes potenciales: puedes alcanzar a quienes otras páginas excluyen.
- Mejor experiencia general: contraste, orden y claridad ayudan a todos los visitantes.
- Beneficios para el SEO: textos alternativos, encabezados bien estructurados y HTML semántico ayudan a Google a entender tu página.
- Menor riesgo regulatorio: en la Unión Europea, el Acta Europea de Accesibilidad aplica desde junio de 2025 a ciertos productos y servicios, entre ellos el comercio electrónico. Si vendes allá, consulta con un especialista legal.
La referencia: WCAG 2.2, nivel AA
Las pautas WCAG del W3C se organizan en cuatro principios: perceptible, operable, comprensible y robusto. Para la mayoría de los negocios, el objetivo razonable es el nivel AA. Estas son las prácticas con más impacto:
1. Contraste suficiente
Texto normal con al menos 4.5 a 1 respecto al fondo; texto grande y componentes de interfaz, 3 a 1. El gris claro sobre blanco, tan popular, suele fallar.
2. Todo funciona con teclado
Prueba: pulsa Tab. ¿Puedes llegar a todos los enlaces, botones y campos? ¿Ves siempre dónde está el foco? Nunca quites el contorno de enfoque sin reemplazarlo por uno visible.
3. Textos alternativos con sentido
Cada imagen informativa necesita un alt que describa su función. Las imágenes decorativas llevan alt vacío (alt="") para que los lectores de pantalla las ignoren.
4. Formularios claros
Cada campo con su etiqueta visible y asociada (no solo un texto de ejemplo dentro del campo), errores explicados con palabras y sugerencia de cómo corregirlos.
5. Estructura de encabezados
Un H1, subtítulos H2 y H3 en orden lógico. Quien usa lector de pantalla navega saltando de encabezado en encabezado.
6. No depender solo del color
Un error en rojo debe incluir también un ícono o texto. Los enlaces dentro de párrafos deben distinguirse más que por el color.
7. Áreas táctiles y movimiento
Botones suficientemente grandes y separados. Animaciones que respeten la preferencia «reducir movimiento» y nada que parpadee.
Cómo revisar tu sitio en 10 minutos
- Navega toda la página usando solo Tab, Mayús+Tab y Enter.
- Acércala al 200 % con el zoom del navegador: ¿sigue siendo usable?
- Corre la auditoría de accesibilidad de Lighthouse y la extensión axe DevTools.
- Revisa los contrastes con una herramienta de contraste de color.
- Prueba el flujo principal (por ejemplo, el formulario de contacto) con un lector de pantalla como VoiceOver o NVDA.