Transcripción de texto

Tiflo Audio Podcast 190

Conociendo los overlays en la accesibilidad web y por que no debemos promover su uso

A continuación, se presenta la transcripción de texto del episodio 190 de Tiflo Audio Podcast.

Comienzo del episodio

[Síntesis de voz]
Cargando el episodio 190 de Tiflo Audio.
[Efecto de sonido].
[Vos de José Manolo Alvarez]
Bienvenidos a este nuevo episodio de Tiflo Audio, el podcast donde promovemos tecnologías accesibles para las personas ciegas.

Reciban un tecnológico saludo de este su amigo José Manolo Alvarez, grabando este episodio desde San Juan, Puerto Rico.

Les recuerdo que este episodio está dividido por capítulos, por lo que si utilizas un app para escuchar el podcast que da apoyo a los chapters, puedes ir directamente a la sección que te interese.

Igualmente, este episodio tiene disponible transcripción de textos para que personas sordo ciegas puedan acceder a sus contenidos por medio de una línea Braille o una persona ciega pueda acceder dichos textos rápidamente con su lector de pantalla. Solamente tienen que ir a la página web de Tiflo Audio y en cada entrada de los episodios encontrarán el enlace para acceder a las transcripciones de texto.

El tema del episodio de hoy es uno muy importante y relevante ya que está relacionado a la accesibilidad de las páginas web para las personas ciegas.

Una alternativa controversial que se ha vuelto popular hoy día son los llamados overlays o las superposiciones de accesibilidad.

Y aunque los overlays o las superposiciones de accesibilidad pueden parecer una solución rápida y fácil para hacer una página accesible, en el episodio de hoy les estaré explicando el por que no debemos promover su uso.

Así que si te interesa conocer más detalladamente de este tema, ponte cómodo y a disfrutar de este episodio de Tiflo Audio.

Información de contacto

[Voz de Manolo].
Les recuerdo que pueden visitar el sitio de Tiflo Audio en www.tifloaudio.com y ahí podrán escuchar todos nuestros pasados episodios.

Pueden visitar también la página de la Comunidad Manolo.Net desde www.manolo.net.

La página de la Fundación Manolo.Net se encuentra en www.fundacionmanolonet.org.

Me pueden enviar un E-mail a manolo@manolo.net.

O me pueden seguir en Twitter como tiflomanolo.

Contenido del episodio

[Voz de Manolo].
Hoy les estaré hablando de un tema que está muy de moda en el área de la accesibilidad web. Los llamados overlays o la superposición. Para efectos de este episodio, vamos a llamarlos overlays, que es su nombre en inglés.

Los overlays básicamente son una programación generalmente en Javascript y esa línea de código se coloca en una página web y cuando el usuario entra a esa página se hacen unos cambios en el navegador del usuario y las compañías que venden este servicio reclaman que esa página ya es accesible y cumple con todas las guías de accesibilidad.

Aunque en la teoría eso suena bien bonito, la realidad es que no lo es.

Para comenzar a desarrollar este tema voy a explicarle basado en mi experiencia las mejores prácticas que se necesitan para lograr que las páginas web sean accesibles.

Lo primero es que tienen que haber unas guías de accesibilidad. No se puede reinventar la rueda. Ya hay unos estándares como por ejemplo las guías de la WCAG 2.1. WCAG son las siglas en inglés del Web Accessibility Content Guideliness. Son unas guías que generan la w3c dentro de el comité WAI que es el Web Accessibility Iniciative. Y precisamente es el establecer unos estándares que se crean con el insumo de expertos en el área de la accesibilidad digital para que puedan servir de referencia a la hora de hacer páginas webs accesibles. También están las guías de la Sección 508, esto es en los Estados Unidos.

Las guías de la WCAG las podemos dividir en cuatro arias. Lo que queremos cuando se implementen éstas guías es que una página web sean:

1. Perceptible.

¿Y qué es eso que la información sea perceptible?

Bueno, el mejor ejemplo es describir todas las imágenes de la página web con textos alternativos. De esa manera una persona ciega cuando entra a navegar esa página web el lector de pantalla le va a decir imagen y la descripción de el texto alternativo. No solamente que el lector de pantalla lo lea, sino que también se pueda acceder con una línea Braille que se puedan leer esos contenidos ya sea por una persona ciega o por una persona sordo ciega. Por lo tanto, esa imagen que es una información visual la hacemos perceptible con el texto alternativo para un acceso no visual.

Hay otras áreas que se tocan al hacer la información perceptible, como por ejemplo los contrastes de los colores, pero simplemente lo que le estoy haciendo es un pequeño repaso para que nos sirva de base al tema que vamos a seguir desarrollando.

2. Operable.

Por ejemplo, si nosotros entramos a una página web y hay un formulario, pues nosotros tenemos que estar completamente seguros que cuando una persona ciega que entra a navegar la página con un teclado cuando presione la tecla TAB se vaya moviendo de campo en campo. Pero no solamente que se mueva de campo en campo, que siga el orden correcto. Ese primer campo usualmente nos pide el primer nombre, yo le escribo José y cuando le doy TAB me lleve al campo de la inicial y escribo la letra m y cuando le vuelvo a dar TAB me lleve al apellido y escribo Alvarez. Pero, si usted presiona TAB después de escribir el primer nombre y lo lleva al campo de la dirección 2 ya no siguió el orden. Entonces esa página es inaccesible y no es operable.

Recuerden que no todo el mundo accede a los contenidos de las páginas web utilizando el mouse o tocando una pantalla. Hay personas que también lo hacen utilizando solamente el teclado.

3. Entendible.

Aquí se busca entre otras cosas, el presentar la información de una manera consistente.

Por ejemplo, si una página web coloca al principio los enlaces de navegación y luego viene su contenido y al final se presenta la información de contacto, pues cada página debe seguir presentando ese mismo formato para que haya una consistencia. Por lo que ya yo sé que siempre al principio están los enlaces de navegación y la segunda parte que puedo navegar son los contenidos que van cambiando de acuerdo a las páginas y al final siempre estará la información de contacto.

También aquí es importante el uso de encabezados para establecer una secuencia en esos contenidos. El titular debe ser un encabezado de nivel uno y un sub titular de nivel 2 y así sucesivamente seguir un orden de jerarquía a la hora de navegar para hacer la información más organizada y entendible.

4. Robusta.

La cuarta área es hacer la información robusta. Y aquí el protagonista es la accesibilidad. Nosotros queremos que esa página web pueda ser totalmente accesible para una persona ciega no importa si la accede desde un navegador de un celular o de una tableta o de una computadora con sus respectivos lectores de pantalla.

La segunda parte de las mejores prácticas de accesibilidad web es la base legal, porque la buena intención no es suficiente.

Y no solamente es que haya una ley, es que esa legislación tiene que tener dientes. Eso significa que si una persona ciega va a una página de una agencia de gobierno o una entidad gubernamental, por ejemplo, y esa página no es accesible, la persona ciega pueda querellarse y haya una consecuencia porque se le está negando el acceso a un servicio de manera digital.

Un ejemplo es la Sección 508 del Acta de Rehabilitación de los Estados Unidos, es una ley de accesibilidad donde si han habido penalidades a entidades gubernamentales federales que no han hecho su página web accesible. La única manera que podemos implementar una ley de accesibilidad web y que sea efectiva, es que la misma permita la rendición de cuentas cuando no se haga una página web accesible. De nada vale que usted en su país haga una ley de accesibilidad y eso está muy bonito y los políticos contentos, pero el verdadero resultado tiene que ser en la práctica cuando cada día hayan más páginas accesibles y que se impongan multas a los que no sigan esa ley.

Ahora bien, usted me puede preguntar que relación tienen estas dos mejores prácticas de accesiblidad web que les he mencionado con los overlays de accesibilidad.

Bueno, ambas partes tienen que ver directamente con los overlays.

Primero para las guías de accesibilidad, ya hay varias compañías como AccessiBe, UserWay y AudioEye y muchísimas más. Son compañías que entonces ellos dicen bueno hay una empresa o alguna agencia de gobierno que tiene que cumplir una ley de accesibilidad web y ellos le dicen yo te integro una programación una línea de código en tu página web y eso te garantiza que tu página cumple con todas las guías de accesibilidad y que cumple con la ley.

Entonces empresas y compañías y agencias de gobierno y universidades han comenzado a utilizar estos servicios de los overlays para que no los demanden. Generalmente esto es un servicio que es por suscripción. Por ejemplo, te pueden cobrar $50 al mes pero la organización dice bueno por $50 al mes que son $600 al año, yo saco ese presupuesto pero ya cumplo con la accesibilidad web.

pero aquí hay algo que nosotros tenemos que entender y es relacionado a las guías de accesibilidad que les menciono de la WCAG, y es que las guías de accesibilidad han sido creadas para que se requiera la intervención de una persona, un ser humano con conocimiento para poder determinar si se han cumplido o no. Por lo tanto, la accesibilidad web no se puede automatizar, por ahora eso todavía no resulta posible y lo que nos venden estas compañías no es cierto, no es correcto.

Demostración menú configuración overlay

Les voy hacer ahora una demostración para que ustedes conozcan cómo es que una persona tendría que configurar un overlay en una página web.

Así que vamos a escuchar esa navegación que la voy a hacer con mi lector de pantalla y luego le voy a explicar el por qué nosotros no debemos promover el uso de overlays para la accesibilidad web para las personas ciegas.

Aquí estoy en una página web que tiene integrado un overlay de accesibilidad. Me voy a mover con flecha hacia abajo.

[Síntesis de voz]
Botón habilitar las funciones de accesibilidad para dificultades visuales.

[Voz de Manolo]
Me dice el botón para yo presionarlo y habilitar el overlay con características de accesibilidad para personas ciegas.

No voy a decir el nombre de la página donde estoy haciendo la demostración porque esta página es un caso real. Yo hice unos señalamientos que tenían un overlay y ya esa organización eliminó el overlay de su página pero esto lo grabé mientras estaba haciendo la navegación para documentar y probarles que realmente la página no lograba ser accesible y cumplir con las guías de accesibilidad.

Me muevo con flecha hacia abajo.

[Síntesis de voz]
Botón abrir el menú de accesibilidad.

[Voz de Manolo]
Hay un botón para abrir el menú de accesibilidad y ahí es donde se tendrían que configurar las diferentes alternativas. Vamos entonces a darle Enter.

[Síntesis de voz]
UserWay. Menú de accesibilidad. Marco principal. Región clic en el cerrar el menú de accesibilidad botón.

[Voz de Manolo]
Y me dice UserWay, que es una de las empresas que les comenté que trabajan con este tipo de tecnología de overlay. Me voy a mover ahora con flecha hacia abajo varias veces.

[Síntesis de voz]
Clic en el enlace.
Como funciona UserWay.
Redirigir al sitio web de UserWay.
Widget de gran tamaño.
Botón conmutador sin pulsar. Habilitar contraste mejorado.

[Voz de Manolo]
Y ahí me detengo porque fíjense que ya comienzan los botones para yo seleccionar y me dice habilitar las opciones del contraste mejorado o sea para especificar unos colores en particulares que queremos que se represente esa página. Me muevo con flecha hacia abajo varias veces para que escuchen otras configuraciones.

[Síntesis de voz]
Botón conmutador sin pulsar. Destacar enlaces.
Botón conmutador sin pulsar. Habilitar texto más grande.
Botón conmutador sin pulsar. Aumentar el espaciado del texto.
Botón conmutador sin pulsar. Pausar animaciones.
Botón conmutador sin pulsar. Habilitar fuente compatible con dislexia.
Botón conmutador sin pulsar. Habilitar cursor mejorado.
Botón conmutador sin pulsar. Habilitar información sobre herramientas.
Botón conmutador sin pulsar. Aumentar la altura de la línea.
Botón conmutador sin pulsar. Cambiar la alineación del texto.
Botón conmutador sin pulsar. Cambiar saturación.
Botón restablecer todas las configuraciones de accesibilidad.

[Voz de Manolo]
Y ahí sería para restablecer las opciones de accesibilidad. Me muevo con flecha abajo.

[Síntesis de voz]
Botón contraído. Mover barra ocultar Widget.

[Voz de Manolo]
Ahí sería para ocultar el overlay. Me voy a mover nuevamente varias veces con flecha abajo para escuchar lo que resta de este menú.

[Síntesis de voz]
Lista con dos elementos. Enlace.
Reportar un problema. Enlace.
Gestionar.
Fuera de lista. Visitado enlace.
Gráfico. User Way.

[Voz de Manolo]
Esa última opción al final, usted podría ir a la página de UserWay.

Así que ya ustedes tienen una idea de lo que es un menú de configuración de un overlay porque lo acabamos de navegar.

Si usted va a una página web y encuentra un overlay de accesibilidad web, yo lo exhorto a que le escriba y se ponga en contacto con esa empresa, esa compañía, esa universidad, esa agencia gubernamental y le diga que el uso de overlays no es recomendable como alternativa para hacer la página accesible. Y que no le va a garantizar de una posible demanda.

Resumen del episodio

[Voz de Manolo].
En el episodio de hoy les estuve hablando sobre los overlays que es una tecnología muy popular y muy controversial principalmente en los estados unidos.

Y ahora les voy a mencionar varias razones para no promover el uso de los overlays como alternativa de accesibilidad para las personas ciegas.

La primera razón es como yo voy a conseguir esas configuraciones y cómo voy a conseguir ese botón para activar el overlay.

En diferentes páginas que he revisado, algunos lo ponen al principio, otros lo ponen al final, otros lo ponen a mitad, eso es algo totalmente discrecional de la entidad que está colocando ese overlay en su página. Así que ya eso va en contra de las guías de accesibilidad que nos dicen que la información tiene que ser entendible y tiene que haber una consistencia en la presentación de esos elementos para que la persona pueda establecer un patrón y pueda tener una navegación accesible. Incluso, si usted no lo encuentra ni siquiera lo puede activar. Por lo tanto, ya de por sí, encontrar el cómo voy a activarlo y como lo voy a configurar, hace esa página difícil de navegar y de entender.

La segunda razón que les presento es que usted tendría que configurar cada overlay de cada página que visite porque como son diferentes compañías, cada vez que usted se mueva de una página a otra, tendría que volver a pasar por el proceso de encontrar primero el overlay, luego configurarlo nuevamente y después que pase todo ese tiempo en volver a configurarlo, entonces es que puede comenzar a navegar la página.

Fíjate todo el tiempo que usted estaría perdiendo cada vez que entra a una página para configurar el overlay. Mientras que una persona que ve llega a la página y de inmediato comienza a navegar la página y accede a la información que interesa. Mientras usted tiene que dedicar grandes cantidades de tiempo tratando de identificar dónde está el botón de el overlay para luego configurarlo, todo eso en cada página que visite.

La tercera razón que les presento, es que ya el navegador web, hace muchas de estas funciones que ellos integran en el overlay. Por ejemplo, desde el navegador web, usted le puede configurar el tamaño de los textos que usted quiera que estén en las páginas web que usted visite. Usted también le puede especificar el contraste de los colores para que le presente todas las páginas que usté vaya. Esa es la ventaja de usted hacerlo desde su navegador web, que se lo lleva a toda su navegación web y el pretender que usted tenga que volverlo hacer en cada página y configurarlo eso resulta redundante y es una duplicidad. Inclusive, puede causarle conflictos en su navegación y el acceso a esa información.

Y eso me lleva a la cuarta razón, muchos de estos cambios que hacen estos overlays, en muchas ocasiones hace la página todavía más inacesible, o menos accesible. Por ejemplo, yo he revisado overlays donde establezco unos contraste de colores y me permite poner el fondo de un color y el texto de ese mismo color. Ni siquiera me puede decir no utilices estos dos colores que son los mismos. O no utilices colores que no cumplen con la guía de accesibilidad. Por ejemplo, si usted tiene un fondo blanco y usted selecciona una letra amarilla, esa combinación de contraste no cumple con la guía de accesibilidad, porque no tiene un alto contraste. O si ya usted tenía activado en su navegador que usted quería una combinación de colores en particular, cuando lo activa en el overlay, puede tener resultados que en términos prácticos los colores no sean lo que usted necesite y esa página sea totalmente inaccesible.

La quinta razón que les presento es que el usuario que es ciego llega a esa página porque ya tiene activado un lector de pantalla o el usuario que tiene baja visión y requiere magnificar y agrandar todas las informaciones de su tecnología, ya tiene activado el magnificador de pantalla. Lo que se conoce como los programas de asistencia tecnológica o las tecnologías de apoyo.

La persona ciega utiliza su celular, tableta o computadora con un programa lector de pantalla y llegar al navegador web, escribir la dirección de la página o hacer una búsqueda y comenzar a navegar por las diferentes páginas web, no hay manera en que la persona ciega pueda llegar a esa página web y activar el overlay. Y cuando hablo de los lectores de pantalla, incluyo también la posible integración con líneas Braille.

La sexta razón que yo les presento es que hay overlays que de inmediato que usted entra a la página ellos tienen una implementación de qué dice usted está usando un lector de pantalla. Entonces trata de establecer unas configuraciones para que sean favorables al lector de pantalla. Pero que sucede, eso va en contra de su privacidad. Por qué tienen que guardar esos datos cuando estoy entrando a una página web en el que usted está utilizando un lector de pantalla. Eso es lo que yo no promuevo. Nosotros tenemos el derecho de navegar y tener la privacidad que requerimos como cualquier persona que entra a una página a buscar una información. Fíjate que también integrar estas opciones automáticas, por ejemplo, el que por medio de inteligencia artificial si detecta que usted tiene un lector de pantalla, todas las imágenes se les integra un texto alternativo por medio de inteligencia artificial. Bueno, fíjese que la única manera que se garantiza de qué esa descripción de texto responda al contexto de porque realmente está puesta ahí, es porque una persona, un ser humano, hizo esa descripción de texto.

La próxima razón que les presento, es que esa línea de código en Javascript, tiene que cargarse en su navegador. Y en ocasiones, esa línea no se carga correctamente. Ya sea por la conexión de Internet o por diferentes situaciones técnicas, que no son compatibles. Por ejemplo, si usted en su navegador tiene un bloqueador de Widgets, entonces no se cargaría nunca.

Y finalizo este resumen de mis razones por la cual yo no promuevo el uso del overlay, y les recomiendo a ustedes que tampoco lo promuevan, es que cuando uno utiliza una herramienta para revisar el nivel de accesibilidad, como por ejemplo WAVE, que es una de las que yo le recomiendo para que usted vaya y usted puede poner una dirección de página web y el de manera automática le va mostrar posibles errores de accesibilidad. Claro, ya les dije que las guías de accesibilidad requieren interpretación de una persona con conocimiento, por lo tanto, esta herramienta de revisión de nivel de accesibilidad básicamente lo que nos dan es un 30% de efectividad. O sea, el 70% de los errores de accesibilidad a esa página no los va a identificar. Pero ese 30 porciento por lo menos le puede dar una idea al webmaster o programador si no tiene imágenes descritas y otras guías de accesibilidad que pueden ser prioridades.

Ahora bien, con un overlay, esta herramienta WAVE tiene conflictos y cuando se trata de buscar el nivel de accesibilidad a esa página te va a indicar que esa página tiene un overlay y que no puede procesar la misma y no puede darte el resultado. Por lo tanto, también es una barrera a la hora de que herramientas de validación de páginas web que nos puedan servir para tener una idea inicial de su nivel de accesibilidad.

Para mi, el uso de overlays también es una cuestión de filosofía. Fíjate que una cosa es que a ti te digan si yo lo que puse fueron esos widgets para hacer la letra un poco más grande y si una persona está en una pantalla pequeña como un celular, pueda verlo mejor, como una persona de mayor edad que tiene espejuelos. Pues eso es una cosa, pero otra cosa es que te digan que el overlay cumple con todas las guías de accesibilidad y hace la página accesible.

Usted siempre procure que la página la hagan accesible de acuerdo a unos estándares, ya hay unas guías establecidas.

Notas del episodio

[Voz de Manolo].
En las notas del podcast les voy a dejar un enlace a una página de una iniciativa que se conoce como los Overlays Sheets. Ahí les presentan muchísima información relacionada a los overlays. Esta página es una iniciativa voluntaria de profesionales de la accesibilidad web de todas partes del mundo y le explica paso a paso el por qué los overlays no son una alternativa a seguir en la accesibilidad web.

Bueno amigos, hasta aquí el episodio 190 de Tiflo Audio. Espero que les haya gustado y que la información le haya resultado interesante y que le pueda ser de utilidad.

Por lo tanto, será hasta una próxima ocasión.
[Sonido de un coquí cantando]

Final del episodio

Ir a la página de Tiflo Audio Podcast.