Accesibilidad web: por qué importa y cómo empezar

Alrededor de una de cada seis personas en el mundo vive con una discapacidad significativa. Muchas más tienen limitaciones temporales o situacionales: un brazo roto, una pantalla de móvil pequeña a pleno sol o la vista cansada al final del día. Una web accesible funciona para todas ellas, y normalmente también funciona mejor para todos los demás.

Por qué la accesibilidad importa para tu negocio

• Más clientes: si la gente no puede leer, navegar o comprar en tu web, se va a la competencia.
• Mejor SEO: los encabezados claros, los enlaces descriptivos y las descripciones de imágenes ayudan a los buscadores a entender tus páginas.
• Requisitos legales: en muchos países, como en la UE con la Ley Europea de Accesibilidad y en EE. UU. con la ADA, se espera cada vez más que las webs que venden al público sean accesibles.
• Una marca mejor: una web inclusiva demuestra que te importa cada cliente.

El estándar que debes seguir

Las Pautas de Accesibilidad para el Contenido Web (WCAG) son la referencia internacional. La mayoría de las empresas aspiran a cumplir WCAG 2.1 o 2.2 en el nivel AA. Las pautas se organizan en torno a cuatro principios: el contenido debe ser perceptible, operable, comprensible y robusto.

Mejoras rápidas que puedes comprobar hoy

1. Alternativas textuales: cada imagen con significado tiene una breve descripción (texto alternativo). Las imágenes decorativas llevan el texto alternativo vacío para que los lectores de pantalla las omitan.
2. Contraste de color: el texto es lo bastante oscuro respecto a su fondo como para leerse con facilidad. Evita el gris claro sobre blanco.
3. Encabezados en orden: un encabezado principal por página y luego encabezados de sección lógicos, para que los usuarios de lectores de pantalla puedan saltar por la página.
4. Enlaces descriptivos: "Descarga la lista de precios" en lugar de "haz clic aquí".
5. Uso con teclado: todos los menús, botones y formularios se pueden usar con las teclas Tab y Enter, con un contorno de foco visible.
6. Formularios con etiquetas: cada campo tiene una etiqueta visible, y los mensajes de error explican cómo solucionar el problema.
7. Zoom y tamaño del texto: la página sigue funcionando al ampliarla al 200 por ciento.
8. Subtítulos: los vídeos tienen subtítulos y el audio tiene transcripción.

Errores comunes

• Texto dentro de imágenes, que los lectores de pantalla no pueden leer y que no se adapta al tamaño.
• Ventanas emergentes que atrapan a los usuarios de teclado o que no se pueden cerrar.
• Botones que son solo iconos, sin un nombre accesible.
• Usar solo el color para indicar algo, como el rojo para un error sin ningún mensaje.
• Confiar en widgets de "overlay de accesibilidad" en lugar de corregir la propia web. Rara vez resuelven los problemas reales.

Cómo probar tu web

Empieza con herramientas gratuitas como Google Lighthouse o WAVE para detectar los problemas evidentes. Después prueba tu propia web usando solo el teclado y con el lector de pantalla integrado en tu teléfono u ordenador. Las herramientas automáticas detectan aproximadamente un tercio de los problemas, así que merece la pena que alguien con experiencia revise manualmente las páginas importantes, como el proceso de pago y los formularios de contacto.

Hazla parte del proceso

La accesibilidad es más fácil cuando se integra desde el principio: en el diseño, en el código y en cada nueva página que publicas. Corregirla después es posible, pero cuesta más.