¿Por qué las empresas están retirando los overlays de accesibilidad de sus webs?

¡Hola! Hoy quiero hablaros de un tema que está generando bastante debate en el sector digital. Si trabajáis en diseño o desarrollo, seguro que os habéis cruzado con esos botones que prometen hacer que una web sea accesible por arte de magia. Parecen la solución perfecta y rápida pero... ¿es oro todo lo que reluce? Vamos a desmontar algunos mitos.

Antes de nada, veamos la definición de overlay de accesibilidad para entender en qué consiste.

Un overlay de accesibilidad es como ponerle unas gafas ajustables a una página web para que el visitante pueda verla y usarla mejor según sus propias necesidades.

Se trata de un pequeño programa que se añade a un sitio web. Al instalarlo en tu web, suele aparecer un botón en una esquina de la pantalla que al pulsarlo, despliega un menú con herramientas rápidas para cambiar cómo se ve y funciona la página en ese momento.

Por ejemplo, ofrece a los usuarios opciones para:

• Hacer la letra más grande para que sea más fácil de leer.
• Cambiar los colores o aumentar el contraste si tienen dificultades de visión.
• Pausar las animaciones o videos que se mueven solos.
• Resaltar los enlaces para saber exactamente dónde se puede hacer clic.

Entonces, si a simple vista parece una buena solución, ¿por qué se están retirando de las webs?

La respuesta es sencilla: aunque estas herramientas nacen con buena intención, actúan como un parche en una pared rota. El overlay mejora ligeramente la apariencia externa, pero no arregla el código real de la página web subyacente.

Dicho de otro modo, si tu web presenta problemas de accesibilidad de base, ningún overlay los resolverá.

¿Qué dice la comunidad de profesionales de la accesibilidad al respecto?

Las principales organizaciones, defensores de los derechos de las personas con discapacidad y profesionales del sector mantienen una postura crítica y de rechazo generalizado ante los overlays, especialmente cuando se comercializan como una solución rápida o automática.

Algunos de estos problemas son:

• Interferencia con tecnologías de asistencia: las personas que usan estas tecnologías ya navegan con sus propias herramientas configuradas a nivel de sistema operativo, como lectores de pantalla o magnificadores. Los overlays a menudo entran en conflicto con estas tecnologías nativas.
• Falsa promesa de cumplimiento normativo: desde la perspectiva de una auditoría, instalar este tipo de herramienta no garantiza que un sitio web cumpla con los criterios de éxito de las WCAG 2.2 ni con los requisitos de la norma europea EN 301 549.

Debido a todo esto, existe el llamado "Overlay Fact Sheet", un manifiesto público apoyado a nivel mundial y firmado por cientos de especialistas que denuncia las prácticas engañosas de las empresas que venden estos productos, prometiendo protección legal sin requerir esfuerzo de desarrollo.

¿Cómo funcionan los overlays de accesibilidad?

Veamos un ejemplo sencillo de estas incompatibilidades. Aquí podemos ver el overlay desplegado, donde distinguimos opciones como:

• Brillo bajo: Disminuye el brillo para una lectura más cómoda.
• Colores menos saturados: Disminuye la saturación para una navegación más calmada.
• Contraste alto: Aumenta el brillo del color de las imágenes e iconos.
• Contraste bajo: Oscurece el color del fondo de pantalla.
• Tipografía más familiar: La tipografía de la web cambiará a Arial.
• Tipografía más grande: Se aumentará el tamaño de la tipografía para una mejor lectura.
• Zoom: Aumenta el tamaño de los elementos de la web para una mejor visualización, que incluye controles para ajustar el porcentaje.

A priori podría parecer una buena opción, pero probemos por ejemplo a usar el zoom, ya que es una tecnología de apoyo que conocemos todos.

Vemos que en principio está funcionando bien. Hay un aumento del zoom, los textos y elementos se agrandan, y no parece que se haya perdido funcionalidad. En este punto, hemos agrandado con el overlay el zoom a un 130%:

La normativa nos dice que el zoom tiene que verse tanto al 200% como al 400% sin pérdida de contenido ni funcionalidad.

Si intentamos ponerlo al 200%, el overlay no lo permite y aplica un límite del 150%. Recordemos que el overlay se titula “Modo accesible avanzado”. Además, vemos que al 150% ya se empiezan a montar los elementos.

Ahora, analicemos la siguiente captura. El zoom en el overlay sigue marcando un 150%, pero la disposición de los elementos ya es la de mobile. Este cambio sucede cuando se aumenta el zoom del navegador a un 200% (aprox) o superior, pero si el overlay dice que sigue al 150%... ¿Cómo ha podido suceder esto?

La respuesta es más sencilla de lo que parece y os prometo que no es magia 🪄.

Lo que hice fue simplemente usar el zoom del propio navegador. Al subirlo a un 175%, el navegador obligó a la web a saltar de forma nativa a su vista móvil para proteger la lectura. Sin embargo, el overlay se quedó congelado en su propio porcentaje ajeno a la realidad del zoom nativo de la web.

Es decir, estamos comprobando que estas dos configuraciones no se comunican ni son compatibles entre sí, el overlay va por un lado y las herramientas nativas del navegador van por otro interfiriendo en la experiencia real del usuario.

El mito de la "solución mágica" en accesibilidad

Muchas empresas caen en la falsa creencia de buscar un atajo: un script automático o un botón que haga su web accesible de la noche a la mañana.

La accesibilidad no es un interruptor que se enciende al final del proyecto. 

Al igual que la seguridad o el rendimiento, es un pilar de calidad que requiere empatía y esfuerzo humano. Para que una web sea verdaderamente inclusiva, debe construirse desde los cimientos y ser pensada con accesibilidad desde el primer boceto de diseño hasta la última línea de código.

La realidad es que la accesibilidad es un factor transversal a todo producto o servicio.

Y si no puedo usar overlays, ¿cómo hago mi web accesible?

Construir una web accesible desde cero, sin depender de "tiritas" externas, significa integrar la inclusión en cada paso del proyecto, desde la ideación y el diseño hasta el código final.

¿Recordáis cuando empezó el "mobile first"? Ahora ha llegado la época del "accessibility first", un concepto que debe formar parte del ADN de todos los creadores de productos y servicios.

Para lograrlo de forma efectiva, el proceso se divide en cuatro pilares fundamentales:

• Código semántico: Construir el "esqueleto" de la web utilizando correctamente el HTML. Esto permite que la página sea navegable por teclado y comprensible para las tecnologías de asistencia, como los lectores de pantalla.
• Diseño (UX/UI): Crear interfaces claras, predecibles y legibles, asegurando un buen contraste y no dependiendo exclusivamente del color para transmitir información importante.
• Alternativas y contexto: Ofrecer descripciones de texto para las imágenes importantes (etiquetas ALT) y aportar contexto extra mediante código solo cuando sea estrictamente necesario.
• Pruebas continuas: Evaluar la web constantemente durante todo su desarrollo, combinando revisiones automáticas con pruebas manuales para detectar y corregir barreras antes de su publicación.

Un producto o servicio accesible es un producto más robusto y, por ende, estará mejor preparado y será más compatible con las tecnologías actuales y futuras.

En la práctica, esto se traduce en tres grandes ventajas tecnológicas:

• Al usar código limpio y nativo, la web funciona perfectamente en cualquier formato o dispositivo, desde un móvil hasta un asistente de voz.
• Una estructura sólida y lógica es exactamente lo que necesitan las nuevas tecnologías, como la inteligencia artificial o la realidad mixta para funcionar correctamente.

La accesibilidad no es solo inclusión, es sinónimo de una mejor ingeniería.

La próxima vez que os encontréis con uno de estos botones de accesibilidad en una web, ya sabéis todo lo que hay detrás de esa promesa, desmontar estos mitos es el primer paso para mejorar la calidad de los productos que construimos. 

Si esta lectura os ha resultado útil, os animo a compartirla con vuestros compañeros de diseño o desarrollo.

¡Nos vemos en la próxima publicación con más reflexiones!