Accesibilidad web: cómo hacer que tu sitio sea para todos

Un sitio web que excluye personas es un sitio incompleto

En Chile, millones de personas viven con algún tipo de discapacidad: cerca del 17% de la población adulta, según el estudio ENDISC. Personas con discapacidad visual, auditiva, motriz o cognitiva que usan internet todos los días, compran online, buscan servicios y necesitan acceder a la información igual que cualquier otro usuario.

Si tu sitio web no es accesible, no solo estás excluyendo a un segmento enorme de potenciales clientes: también estás ofreciendo una experiencia inferior a personas mayores, personas con lesiones temporales, usuarios que navegan sin mouse y muchos otros. La accesibilidad web beneficia a todos, no solo a personas con discapacidad permanente.

En este artículo te explicamos los principios fundamentales de la accesibilidad web y los cambios simples que puedes implementar hoy para hacer tu sitio más inclusivo.

Los 4 pilares de la accesibilidad web (WCAG)

Las Directrices de Accesibilidad para el Contenido Web (WCAG) son el estándar internacional para accesibilidad web. Se organizan en cuatro principios fundamentales:

1. Perceptible: que todos puedan percibir el contenido

La información y los elementos de la interfaz deben presentarse de formas que todos los usuarios puedan percibir, no solo visualmente:

• Texto alternativo en imágenes (alt text): Cada imagen debe tener una descripción que los lectores de pantalla puedan leer a usuarios con discapacidad visual. No basta con poner "imagen" o dejar el nombre del archivo.
• Subtítulos en videos: Si tu sitio tiene videos, deben tener subtítulos para personas con discapacidad auditiva. YouTube genera subtítulos automáticos que puedes editar.
• Contraste suficiente: El texto debe tener un contraste de color adecuado respecto al fondo para ser legible por personas con baja visión. El estándar mínimo WCAG es un ratio de 4.5:1 para texto normal.
• No depender solo del color: Si usas rojo para indicar errores en un formulario, agrega también un ícono o un texto. Las personas con daltonismo (8% de los hombres) no distinguen ciertos colores.

2. Operable: que todos puedan usar la interfaz

Los componentes de la interfaz y la navegación deben ser utilizables por todos, incluyendo personas que no usan mouse:

• Navegación completa por teclado: Todo lo que se puede hacer con mouse debe poder hacerse con teclado (Tab para navegar, Enter para activar, Escape para cerrar). Muchas personas con discapacidad motriz usan solo teclado.
• Tiempo suficiente: Si hay temporizadores o contenido que desaparece, los usuarios deben poder extender o detener el tiempo.
• Sin destellos peligrosos: Contenido que parpadea más de 3 veces por segundo puede provocar convulsiones en personas con epilepsia fotosensible.
• Foco visible: Cuando navegas con teclado, debe ser claramente visible qué elemento está seleccionado (un borde o resaltado alrededor del elemento activo).

3. Comprensible: que el contenido sea claro

La información y la operación de la interfaz deben ser comprensibles:

• Lenguaje claro y simple: Evita jerga innecesaria. Escribe como le hablarías a un cliente en persona. En Chile, esto significa escribir en español claro, sin anglicismos rebuscados.
• Navegación consistente: Los menús y elementos de navegación deben estar en el mismo lugar en todas las páginas. No cambies la ubicación del menú o los botones entre secciones.
• Prevención de errores en formularios: Indica claramente qué campos son obligatorios, muestra mensajes de error específicos ("El correo electrónico no es válido" en vez de "Error") y permite revisar antes de enviar.

4. Robusto: que funcione en todas las tecnologías

El contenido debe ser lo suficientemente robusto para funcionar en diferentes navegadores y tecnologías de asistencia:

• HTML semántico: Usa las etiquetas HTML correctas para cada tipo de contenido. Un encabezado debe ser un <h2>, no un párrafo con texto grande y negrita. Una lista debe ser un <ul> o <ol>, no párrafos con guiones.
• Compatibilidad con lectores de pantalla: Los lectores de pantalla (JAWS, NVDA, VoiceOver) dependen del HTML semántico para interpretar y comunicar el contenido correctamente.

Cambios simples que hacen una gran diferencia

No necesitas rediseñar tu sitio completo para mejorar la accesibilidad. Estos cambios son relativamente fáciles de implementar y tienen un impacto enorme:

1. Agrega alt text descriptivo a todas tus imágenes: En vez de dejar "IMG_2345.jpg" o "imagen", escribe una descripción real: "Equipo de diseño web trabajando en oficina de Santiago". Si la imagen es decorativa y no aporta información, puedes dejar el alt vacío (alt="").
2. Verifica el contraste de colores: Usa la herramienta gratuita WebAIM Contrast Checker. Ingresa tu color de texto y tu color de fondo y te dice si cumple el ratio mínimo de 4.5:1. Muchos sitios con texto gris claro sobre fondo blanco no cumplen este estándar.
3. Organiza los encabezados correctamente: H1 para el título principal (uno solo por página), H2 para las secciones principales, H3 para subsecciones. Nunca saltes niveles (de H2 a H4, por ejemplo). Los lectores de pantalla usan esta jerarquía para navegar el contenido.
4. Asocia etiquetas a los campos de formulario: Cada campo de formulario (input, select, textarea) debe tener un elemento <label> asociado. Esto permite que los lectores de pantalla anuncien qué información se espera en cada campo.
5. Usa links descriptivos: En vez de "Click aquí" o "Ver más", escribe "Descarga nuestra guía de precios" o "Lee el caso de éxito completo". Los usuarios de lectores de pantalla navegan de link en link y necesitan saber a dónde lleva cada uno sin leer todo el texto alrededor.
6. Usa un tamaño de fuente legible: El estándar mínimo recomendado es 16px para texto de cuerpo. Además, asegúrate de que los usuarios puedan aumentar el tamaño del texto sin que el diseño se rompa.

La accesibilidad no es un extra ni un lujo. Es una responsabilidad ética y, como veremos a continuación, también es una ventaja competitiva directa.

Accesibilidad y SEO: dos caras de la misma moneda

Acá viene la parte que convence a los más escépticos: muchas mejoras de accesibilidad también mejoran tu posicionamiento en Google. No es coincidencia, es lógico: tanto las tecnologías de asistencia como los motores de búsqueda dependen del código bien estructurado para entender tu contenido.

• Alt text en imágenes: Ayuda a personas con discapacidad visual Y ayuda a Google a entender el contenido de tus imágenes (Google Image Search).
• HTML semántico: Ayuda a lectores de pantalla Y ayuda a Google a indexar tu contenido correctamente.
• Jerarquía de encabezados: Facilita la navegación por teclado Y mejora la estructura SEO de tu contenido.
• Texto legible y bien estructurado: Beneficia a todos los usuarios Y reduce la tasa de rebote, lo que Google interpreta como señal de calidad.

Invertir en accesibilidad no es un gasto: es una inversión que mejora la experiencia de todos tus usuarios y tu posicionamiento en buscadores al mismo tiempo.

Herramientas gratuitas para evaluar la accesibilidad de tu sitio

Puedes hacer un diagnóstico rápido de tu sitio con estas herramientas sin costo:

• WAVE (wave.webaim.org): Extensión de Chrome que analiza cualquier página y te muestra errores de accesibilidad directamente sobre el contenido. Es la más visual e intuitiva.
• Lighthouse (integrado en Chrome DevTools): Además de velocidad y SEO, tiene una sección de accesibilidad con puntuación de 0 a 100 y recomendaciones específicas.
• axe DevTools: Extensión de Chrome más técnica y detallada. Ideal si tienes un desarrollador que pueda implementar las correcciones.
• WebAIM Contrast Checker: Herramienta específica para verificar ratios de contraste entre colores de texto y fondo.

Los sitios de Pixel Up siguen buenas prácticas de accesibilidad web porque creemos que un buen diseño es el que funciona para todos. Si quieres saber cómo está tu sitio actual en términos de accesibilidad, escríbenos y nuestro equipo te orienta sin compromiso.