La importancia de la accesibilidad web para personas ciegas que utilizan la tecnología de líneas Braille
A continuación, se presenta la transcripción de texto del episodio 191 de Tiflo Audio Podcast.
Comienzo del episodio
[Síntesis de voz]
Cargando el episodio 191 de Tiflo Audio.
[Efecto de sonido].
[Vos de José Manolo Alvarez]
Bienvenido a este nuevo episodio de Tiflo Audio Podcast. Recibe un saludo de este tu amigo José Manolo Álvarez.
Agradezco que estés conmigo en éste el primer episodio de Tiflo Audio del año 2023, donde estaré presentando un tema relacionado al Braille y la tecnología.
Y precisamente, en este mes de enero, se conmemora el día cuatro el natalicio de Louis Braille. Por lo que ya es tradición que en Tiflo Audio, en el mes de enero, dedicamos temas relacionados al Braille y la tecnología.
Un recordatorio que este episodio está dividido por capítulos o por chapters. Por lo que si me estás escuchando desde una aplicación que da apoyo a los capítulos o chapters, puedes moverte directamente a la parte del episodio que más te interese.
Y también este episodio tiene transcripción de textos disponibles, para que personas sordo ciegas o personas ciegas puedan acceder sus contenidos por medio de una línea Braille.
Espero que disfrutes de los contenidos del episodio 191 de Tiflo Audio Podcast.
Información de contacto
[Voz de Manolo].
Pueden visitar el sitio de Tiflo Audio Podcast desde su sitio web www.tifloaudio.com y ahí encontrar todos nuestros pasados episodios. Ahí también encontrarán el enlace en cada entrada del podcast para ir a la transcripción de texto y las notas de cada episodio.
También pueden visitar la página de la comunidad manolo net localizada en www.manolo.net.
Pueden visitar la página de la fundación Manolo Net en www.fundacionmanolonet.org.
Me pueden enviar un correo electrónico a manolo@manolo.net.
O me pueden seguir en Twitter como tiflomanolo.
Contenido del episodio
[Voz de Manolo].
Hoy estaré presentando un tema muy interesante ya que trata de la integración de la tecnología, el Braille y la accesibilidad web.
Comencemos con el Braille, el sistema de lectoescritura táctil para las personas ciegas, que fue inventado en el 1824 por Louis Braille. Ya este próximo año, en el 2024, va a cumplir 200 años.
Y hoy día gracias a la tecnología, el Braille sigue siendo vigente para nosotros las personas ciegas. Ya el Braille ha trascendido el papel y hoy día también nosotros lo podemos utilizar en diferentes tecnologías como los celulares, tabletas y computadoras y el acceso que nosotros tengamos a todos esas aplicaciones a todos esos programas también la podemos representar en Braille.
Y para eso se requiere que esa tecnología tenga un programa lector de pantalla y por medio de ese programa lector de pantalla, nosotros poder configurar un dispositivo externo que se le conoce como una línea Braille. La línea Braille, básicamente es un dispositivo que va a ir subiendo y bajando unos puntitos, un Braille electrónico, porque es Braille dinámico. Y los contenidos que nos están presentando esas tecnologías nosotros las podemos acceder en Braille y los podemos tocar.
Por lo tanto, el que yo pueda acceder una tecnología típica del mercado conectándolo a una línea Braille y todos esos contenidos yo poder ir leyéndolos de una manera dinámica con Braille electrónico me lleva al tema de este episodio, la accesibilidad web.
Como también cuando nosotros integramos las guías de accesibilidad, los estándares de accesibilidad, permitimos que personas ciegas o personas sordo ciegas que acceden al web, a un navegador web por medio de una tecnología Braille, una línea braille, también se benefician de la correcta implementación de esa guía de accesibilidad.
Sabemos que nosotros para hacer una página web accesible debemos seguir los estándares de la WCAG 2.1, las que nos encontramos en la actualidad. Tenemos la 2.2 ya por ahí es un borrador y cada vez se acerca más a que la tengamos disponible. Pero al día de hoy, enero del 2023, son las 2.1.
Entonces, yo voy a hacerle una demostración navegando una página web y lo voy a hacer con una línea Braille y le voy a ir explicando el por qué el beneficio de seguir estos estándares. El que nosotros programemos las páginas accesibles benefician a personas que acceden a esos contenido utilizando una línea Braille.
Demostración navegación página web con una línea Braille
[Voz de Manolo]
Voy a hacer esta primera demostración con mi computadora Surface con Windows 11, el lector de pantalla NVDA y mi línea Braille Mantis.
Pero pudiera ser cualquier línea braille y diferentes tecnologías con diferentes sistemas operativos, un iPhone, un iPad, un Android, una Mac, cada respectivo lector de pantalla nos permite tener una configuración de lo que nosotros queremos representar en la línea Braille. Eso varía de acuerdo al lector de pantalla, pero en esencia, la navegación que voy a hacer para motivos del tema del podcast, funciona perfectamente, porque usted va a entender esa relación que tiene la accesibilidad web para los usuarios de líneas Braille.
Así que estoy aquí en mi computadora. Estoy en el escritorio de Windows y le voy a dar la letra m para llegar a Microsoft Edge, que es el navegador que voy a estar utilizando.
[Síntesis de voz]
Microsoft Edge. Casilla de verificación marcado. 4 de 16.
[Voz de Manolo]
Le doy Enter.
[Síntesis de voz]
Retorno de carro.
Ventana barra de la aplicación. Barra de herramientas. Barra de direcciones y búsqueda.
Búsqueda región contraído. Buscar o escribir dirección web. Control más l. En blanco.
[Voz de Manolo]
Voy a escribir www.manolo.net y le voy a dar enter.
[Síntesis de voz]
www.manolo.net
Retorno de carro.
Cargando página.
Carga completa.
Título región. Comunidad Manolo.net.
[Voz de Manolo]
Ahí cuando entres a la página lo primero que me dijo es región título comunidadmanolo.net y yo le di control para detener el habla. Recuerden que el lector de pantalla lo estoy utilizando en este momento para que ustedes vayan escuchando como voy navegando pero yo le voy diciendo lo que estoy leyendo en la línea Braille.
Estoy tocando mi línea Braille y puedo leer RG que significa región. Luego hay un espacio y luego la línea Braille presenta tlo qué significa título y luego hay un espacio y me dice Comunidad manolo.net.
Eso es lo que yo estoy leyendo en mi línea Braille. Por lo tanto, esa información de dónde yo estoy es en la región del titular yo la puedo obtener leyendo en Braille.
Cuando yo entro a una página web, esa página web está dividida por varias partes. Realmente, la primera región es lo que se conoce como el Header, que es dónde está el titular que es donde me encuentro ahora. Luego la próxima región sería la navegación y ahí estarían todos los enlaces de la navegación del sitio web. Luego viene la región principal de la página que es donde están los contenidos y esta parte se puede dividir por varias columnas. Y luego pudiera estar otras partes como la de los footnotes. Básicamente eso es cómo se divide una página cuando usted la va a navegar y es bueno que nosotros conozcamos en términos generales esas divisiones básicas para que nos podamos orientar.
Así que yo me encuentro ahora mismo en esa primera región que es el área del titular que me dice Comunidad Manolo.net y voy a darle ahora flecha hacia abajo.
[Síntesis de voz]
Navegación región.
Lista con 6 elementos.
viñeta visitado enlace inicio.
[Voz de Manolo]
¿Y qué me presenta la línea Braille ahora?
Me dice rg estoy en otra región espacio nav que es la navegación. Por lo tanto, estoy en la región de la navegación y ahí es donde están los diferentes enlaces internos de la página web.
Sigo leyendo la línea Braille y me dice lst y ya tú sabes que es una lista. Por lo tanto, ya yo sé que los próximos enlaces que vienen a continuación se encuentran en una lista dentro de la región de la navegación.
Y luego me presenta los diferentes puntos que significan que es una viñeta y luego me dice enlv que es de un enlace visitado y luego me dice Inicio.
Me voy a seguir moviendo ahora con flecha hacia abajo para seguir navegando por los enlaces de la navegación. Yo puedo utilizar la tecla tab también para ir de enlace en enlace, pero lo que quiero es que ustedes vayan navegando esa página de una manera secuencial junto conmigo.
[Síntesis de voz]
Viñeta enlace Info.
Viñeta visitado enlace Podcast.
Viñeta visitado enlace Fundación.
Viñeta enlace Testimonios.
Viñeta enlace Contacto.
Fuera de lista.
Principal región encabezado nivel 1.
¡Bienvenidos a Manolo.net!
[Voz de Manolo]
Ahí la línea Braille me dice rg que es de región y luego hay un espacio y luego dice prin que es la región principal. O sea, llegué a la región principal de la página web. Ya he pasado por tres regiones. En la parte de arriba el titular, luego la región de la navegación y ahora estoy en la región principal.
Por lo que aquí lo que me presenta la línea Braille es rg espacio prin o sea región principal espacio luego me dice en1 que es encabezado de nivel 1 y ¡Bienvenidos a y como tengo una línea Braille de 40 celdas voy a darle ahora al panning para que me lea la próxima línea y me dice Manolo.Net!
Voy a darle ahora flecha hacia abajo.
[Síntesis de voz]
gráfico foto de Manolo sonriendo utilizando una computadora con una línea Braille en su escritorio.
[Voz de Manolo]
La línea Braille me presenta grf que significa que hay un gráfico y luego un espacio en blanco y luego el texto alternativo de ese gráfico. Por eso es tan importante el que se describan todas las imágenes que hay en una página web con textos alternativos.
Voy a leer en mi línea Braille esa descripción de texto y me dice Foto de Manolo sonriendo y voy a dar panning para que la línea Braille me presente la próxima línea y me dice utilizando una computadora con una y ahí vuelvo a dar pannin y me dice línea Braille en su escritorio.
Que maravilla, ¿Verdad? Poder leer una página web con una línea Braille cuándo se siguen los estándares de accesibilidad.
¿Qué hubiese pasado si esa imagen no se hubiese descrito con texto alternativo?
Simplemente me hubiese dicho gráfico y la página sería inaccesible. Así que ya ustedes tienen presente que cada pues que se describa una imagen contexto alternativo no solamente es para la persona que lo vaya acceder con el lector de pantalla de una manera palante con su síntesis de voz, también es para proveer esa igualdad de acceso al que lo accede con una línea Braille.
Me muevo con flecha abajo.
[Síntesis de voz]
Saludos. Me llamo Manolo y soy una persona ciega. Me encanta la programación de apps software y.
[Voz de Manolo]
Y ahí me sale ya un texto, un párrafo que en la línea Braille me dice Saludos, me llamo Manolo y soy una y ahí le doy otra vez al panning en mi línea Braille y me dice persona ciega. Me encanta la y vuelvo a darle al panning y me dice programación de softwares, apps y le doy nuevamente al panning y me dice video juegos. Soy podcaster y trabajo vuelvo a darle el panning como profesor y por ahí pudiera seguir leyendo.
Ya tienen una idea, fíjate que yo lo estoy leyendo en Braille,estoy revisando esos contenidos y puedo perfectamente seguir donde me encuentro con mi línea Braille.
Ahora me quiero mover a el próximo encabezado entonces yo voy a presionar ahora la letra h y seguir leyendo los contenidos de la página.
[Síntesis de voz]
Tiflo Audio Podcast 190: Las superposiciones en la accesibilidad web encabezado nivel 2.
[Voz de Manolo]
¿Qué me dice la línea Braille?
Me dice en2 que significa que es un encabezado de nivel 2 y luego me dice Tiflo Audio Podcast 190: y le doy pannin y mi línea Braille me dice Las superposiciones en la accesibilidad web.
Ahora bien, dentro de mi navegación, yo pudiera presionar la letra b en el teclado y la voy a presionar.
[Síntesis de voz]
b. Reproducir episodio 190 botón.
[Voz de Manolo]
Y en la línea Braille me dice bt o sea que es un botón y luego hay un espacio y dice Reproducir episodio 190.
Y ahora le voy a dar enter.
[Sonido del episodio 190 de Tiflo Audio]
[Voz de Manolo]
Y ahí le di enter para detener el episodio. Lo que hice fue activar la reprodución del episodio y lo hice todo con mi línea Braille. Por lo tanto, en un reproductor multimedia en una página web es importante que todos sus botones tengan textos que nos indicque que hace cual es la función de esos botones como tal, por que si no, resulta inaccesible.
Así que ya ustedes tienen una idea de lo accesible que a mi me resulta navegar una página web con mi línea Braille y lector de pantalla, cuando la misma sigue las guías, los estándares de accesibilidad.
Demostración formulario inaccesible con el uso de colores
[Voz de Manolo]
Voy ahora a demostrarles otro ejemplo. Estoy ahora en una página de un formulario y me voy a ir moviendo con flecha hacia abajo.
[Síntesis de voz]
Encabezado de nivel 1 Formulario de contacto
[Voz de Manolo]
Y en la línea Braille me dice en1 osea que es un encabezado de nivel 1 y luego me dice formulario de contacto. Me muevo con flecha abajo.
[Síntesis de voz]
Utilice el siguiente formulario para enviarnos sus preguntas.
[Voz de Manolo]
Y ahí la línea Braille me dice Utilice el formulario para enviarnos sus preguntas. Voy a darle ahora flecha hacia abajo.
[Síntesis de voz]
Su nombre.
[Voz de Manolo]
Y ahí la línea Braille me dice Su nombre. Me muevo con flecha hacia abajo.
[Síntesis de voz]
Su nombre edición.
[Síntesis de voz]
Y ahí la línea Braille me dice ce que es un cuadro de edición. Le voy a dar enter.
[Síntesis de voz]
Edición en blanco.
[Voz de Manolo]
Y ahora está el cursor los puntos siete y ocho de la línea Braille blinking haciendo destellos.
Y voy a escribir mi nombre. Voy a poner Manolo Alvarez.
[Síntesis de voz]
Manolo Alvarez
[Voz de Manolo]
Yo me voy a mover ahora por el formulario con la tecla tab para ir de campo en campo y de esa manera ir completándolo. Voy a darle tab.
[Síntesis de voz]
Su correo electrónico edición en blanco.
[Voz de Manolo]
Y ahí la línea Braille me dice Su correo electrónico ce espacio y el cursor está parpadeando por lo tanto estoy en un cuadro de edición para escribir. Voy a poner un correo electrónico mal escrito, por ejemplo manolo2manolo.net. O sea, no le escribí la arroba. Así que lo voy a escribir.
[Síntesis de voz]
manolo2manolo.net
[Voz de Manolo]
Le voy a dar ahora la tecla de tab.
[Síntesis de voz]
Su mensaje edición multi línea.
[Voz de Manolo]
Y está el cursor parpadeando en mi línea Braille y voy a escribir Esto es una prueba y voy ahora a darle la tecla de escape. Y ahora voy a darle la letra b para ir al botón de enviar.
[Síntesis de voz]
b. Enviar botón.
[Voz de Manolo]
Y la línea Braille me dice bt que es un botón y luego me dice Enviar. Si este botón no hubiése tenido el texto que dice Enviar, me hubiera resultado inaccesible ya que la línea Braille me hubiera presentado solamente bt que es un botón pero no se si era el de enviar o cancelar y hubiése tenido que adivinar. Ahora le voy a dar enter.
[Síntesis de voz]
Retorno de carro.
Carga completa.
Encabezado de nivel 1.
Formulario incompleto.
[Voz de Manolo]
Vamos a leer que me dice la línea Braille.
en1 que significa que es un encabezado de nivel 1 y luego me dice formulario incompleto. Así que voy a moverme con flecha hacia abajo.
[Síntesis de voz]
Favor de verificar los campos con el error escrito en letras rojas.
[Voz de Manolo]
Y ahí la línea Braille me dice Favor de verificar los campos con el error escrito y le doy pannin y me dice en letras rojas.
Y ahí está el error de accesibilidad. Por que esta página me va a volver a presentar todos los campos y el de Correo electrónico me lo presenta con letras rojas. Voy a darle ahora flecha hacia abajo.
[Síntesis de voz]
Su nombre.
[Voz de Manolo]
Su nombre. Le doy flecha hacia abajo.
[Síntesis de voz]
Su nombre edición Manolo Alvarez.
[Voz de Manolo]
Y ahí en el campo dice Manolo Alvarez. Me muevo con flecha hacia abajo.
[Síntesis de voz]
Su correo electrónico.
[Voz de Manolo]
Y ahí la línea Braille me dice Su correo electrónico. Ya yo se que ese es el error, por que lo hice a propósito. Pero no hubiera manera de yo saber cual es el error, por que la única manera que se utilizó en esta página para dejar saber el error, es que la palabra Correo electrónico lo puso en letras rojas. Y que pasa cuando una persona accede a la información con una línea Braille, no hay manera en que nosotros podemos obtener esa información. Por lo tanto esto es un error de accesibilidad.
En este caso yo obviamente el formulario lo hubiese hecho de una forma distinta para hacerlo accesible. Lo hubiese programado para que automáticamente el me lleve y me ponga el foco dentro del campo del primer error o debajo de la palabra Correo electrónico escribir en texto que hay un error o que hay que verificar ese campo. Pero de la manera que está, no resulta accesible.
Demostración uso cambio de idioma en una página web con una línea Braille
[Voz de Manolo]
Voy ahora a utilizar el lector de pantalla JAWS en la versión 2023 para hacerles una demostración. Les voy a mostrar la importancia de que utilicemos el estándar de accesibilidad que de acuerdo al idioma de la página o partes del contenido de la página, cuando cambian de idioma, también se tienen que especificar para que el lector de pantalla, en este caso la línea Braille, me presente correctamente esos contenidos.
Estoy en el escritorio, voy a presionar la letra m.
[Síntesis de voz]
m. Presentación en lista Microsoft Edge verificado. 4 de 16.
[Voz de Manolo]
Ahí estoy sobre el icono de Microsoft Edge y le doy enter.
[Síntesis de voz]
Barra de direcciones y búsqueda cuadro de edición.
Buscar o escribir dirección web.
Para situarce en un elemento utilice las flechas.
[Voz de Manolo]
Ahora voy a presionar las teclas de control y la letra l.
[Síntesis de voz]
Control más l. Abriendo nueva ventana.
Barra de direcciones y búsqueda cuadro de edición.
Buscar o escribir dirección web. Escriba texto.
[Voz de Manolo]
Y voy a escribir www.inclusioncode.com y le voy a dar enter.
[Síntesis de voz]
www.inclusioncode.com
Enter.
Cargando página.
Carga completa.
Inclusion Code
[Voz de Manolo]
Y de inmediato pudieron escuchar que el lector de pantalla me leyó Inclusion Code en inglés. Por que esta primera página está en inglés. Este es un editor muy sencillo que yo he programado para promover de manera educativa la programación HTML para personas ciegas de manera accesible.
Voy ahora a leer mi línea Braille y los primeros cuatro caracteres que presenta JAWS en el modo estructurado Braille me dan información del elemento actual y luego me dice Inclusion Code pero con el signo de mayúscula en inglés. O sea, el punto 6 antes de la letra I. Y esto es debido a que la página integra el tag de idioma para especificar que es en inglés y el lector de pantalla JAWS en su versión más reciente puede también una vez configurado cambiar automáticamente la tabla de idioma de la transcripción Braille. Voy a darle ahora flecha hacia abajo.
[Síntesis de voz]
Región navegación.
[Voz de Manolo]
Y la línea Braille me presenta esos cuatro caracteres que les expliqué y luego me dice Región navegación. Me lo está presentando en español por que esa es una información del lector de pantalla que lo tengo en español. Vamos a darle flecha hacia abajo.
[Síntesis de voz]
Lista de 4 elementos.
[Voz de Manolo]
Y ahí la línea Braille me dice Lista de 4 elementos. Me muevo con flecha hacia abajo.
[Síntesis de voz]
Visitado enlace.
Home
Y ahí pueden escuchar como el lector de pantalla dice visitado enlace en español y en inglés me dice Home.
Vamos a la línea Braille y me presenta esos primeros cuatro caracteres, que los primeros dos son en que significa un enlace y los otros dos están en blanco y todos están con los puntos 7 y 8. Luego hay un espacio y me dice Home pero con la mayúscula utilizando el punto 6 que es en inglés. También esa palabra Home está subrayada con los puntos 7 y 8 ya que los enlaces visualmente siempre están subrayados. Y al final me dice env que significa enlace visitado. Voy a darle ahora flecha hacia abajo.
[Síntesis de voz]
visitado enlace.
Download
[Voz de Manolo]
Ahí está download que es para la descarga. Flecha hacia abajo.
[Síntesis de voz]
enlace.
Documentation.
[Voz de Manolo]
Ese es el enlace para la documentación. Y quiero que estén muy pendientes ahora. Me muevo con flecha hacia abajo.
[Síntesis de voz]
visitado enlace Español.
[Voz de Manolo]
Y ahí pudieron escuchar al lector de pantalla leer el enlace Español con la síntesis de voz en español. Por que ese enlace si lo presiono voy a la versión en español de la página web.
Voy ahora a la línea Braille y puedo leer ese enlace con el signo de mayúscula con los puntos 4 y 6 que es en español. Y voy a darle enter.
[Síntesis de voz]
Enter.
Cargando página.
Carga completa.
Inclusion code.
[Voz de Manolo]
Y ahí me cargó la página y me está leyendo el sintetizador de voz en español. Me muevo con flecha hacia abajo.
[Síntesis de voz]
Región navegación.
[Voz de Manolo]
Voy a darle flecha hacia abajo.
[Síntesis de voz]
visitado enlace Inicio.
descarga.
Documentación.
[Voz de Manolo]
Esos son los diferentes enlaces. Ahora muy pendientes. Me muevo con flecha abajo.
[Síntesis de voz]
visitado enlace.
English
[Voz de Manolo]
Y el lector de pantalla me dice visitado enlace en español pero la palabra English me la pronuncia en inglés. Y en la línea Braille, me presenta la palabra del enlace English con el punto 6 que es la mayúscula en inglés. Y luego env que significa que es un enlace visitado.
Por lo tanto, ya ustedes pudieron ver la relación directa que hay cuando una página se integra correctamente el idioma ya sea de todos sus contenidos o parte de sus contenidos y como en mi demostración, el lector de pantalla JAWS pudo cambiar automáticamente no solo la síntesis de voz, sino que también la tabla de idioma de la transcripción Braille y resultó accesible para mi lectura con mi línea Braille.
Resumen del episodio
[Voz de Manolo].
En este episodio les estuve haciendo una demostración de una navegación utilizando un lector de pantalla y una línea Braille, para que vean la relación directa de utilizar los estándares de accesibilidad y como eso me resulta esa información accesible. Eso es algo que muchas personas solamente piensan que la navegación web por una persona ciega es solamente utilizando un lector de pantalla y la síntesis de voz. Pero hay personas ciegas y sordociegas que acceden al Internet por medio de una línea Braille.
Ya vieron que si seguimos una estructura correcta y los estándares de la WCAG 2.1 y hacemos la página perceptible, operable, entendible y robusta, no vamos a tener problemas en accederla con una línea Braille. Pero hay unas áreas específicas de esas guías de accesibilidad que están relacionadas a el acceso por líneas Braille. Las mismas son:
1. Describir las imágenes con textos alternativos. En mi ejemplo de navegación, pude leer las descripciones de textos con mi línea Braille.
2. La información que se transmite a travéz de la presentación como el uso de colores para designar, por ejemplo, en mi demostración un error en el formulario, también debe estar disponible a travéz de información en texto en la página web.
3. Los programas de asistencia tecnológica, como en mi demostración un lector de pantalla, pueden detectar y cambiar automáticamente el idioma de la página y así representarla correctamente al usuario. Eso lo demostré con el lector de pantalla JAWS y mi línea Braille.
Así que de esta manera nosotros promovemos una accesibilidad web y que personas ciegas y sordociegas que utilicen líneas Braille, tengan ese acceso a esa información de una página web. Por lo contrario, el no hacerlo, convertimos esa página web en una inaccesible a personas que utilicen líneas Braille y por eso nuestro episodio fue el demostrar el poder de esa fusión de la tecnología, el Braille y la accesibilidad digital, en este caso, la accesibilidad web.
Notas del episodio
[Voz de Manolo].
En las notas del podcast les voy a dejar el enlace a las guías WCAG 2.1, que es la versión que tenemos actual, para que la puedan tener de referencia, y también las puedan compartir con personas que interesen conocer como poder hacer páginas webs accesibles. Pero también usted les deja saber que el seguir esos estándares, también beneficia a personas ciegas y sordociegas que utilicen tecnologías Braille como las líneas Braille.
Amigos, espero que les haya resultado interesante la información que he compartido con ustedes hoy en este episodio 191 de Tiflo Audio Podcast.
Muchas gracias por escucharme. Será entonces hasta una próxima ocasión.
[Sonido de un coquí cantando]