Introducción a la semántica y la tecnología de asistencia
Aprendiste cómo hacer que un sitio sea accesible para los usuarios que no pueden usar un mouse ni un dispositivo apuntador, ya sea debido a una discapacidad física, un problema tecnológico o una preferencia personal, a través del uso del teclado únicamente. Si bien se requiere cuidado y atención, no es una gran cantidad de trabajo si lo planificas desde el principio. Una vez que se haya completado ese trabajo básico, ya estarás un largo camino por la ruta hacia un sitio totalmente accesible y más pulido.
En esta lección, nos basaremos en ese trabajo y te haremos pensar en otros factores de accesibilidad, por ejemplo, cómo compilar sitios web para admitir usuarios como Victor Tsaran, que no pueden ver la pantalla.
Primero, obtendremos información sobre la tecnología de asistencia, el término general para herramientas como los lectores de pantalla que ayudan a los usuarios con discapacidades que pueden impedirles acceder a la información.
A continuación, veremos algunos conceptos generales sobre la experiencia del usuario y nos basaremos en ellos para profundizar en la experiencia de los usuarios de tecnología de accesibilidad.
Por último, veremos cómo usar HTML de manera efectiva para crear una buena experiencia para estos usuarios, y cómo se superpone en gran medida con la forma en que tratamos el enfoque anteriormente.
Tecnología de asistencia
Tecnología de asistencia es un término general para los dispositivos, el software y las herramientas que ayudan a cualquier persona con discapacidad a completar una tarea. En el sentido más amplio, esto podría ser algo de tecnología básica, como una muleta para caminar o una lupa para leer, o algo de alta tecnología, como un brazo robótico o software de reconocimiento de imágenes en un smartphone.
La tecnología de accesibilidad puede incluir algo tan general como el zoom del navegador o algo tan específico como un control de juego de diseño personalizado. Puede ser un dispositivo físico independiente, como una pantalla braille, o bien implementarse por completo en software, como el control por voz. Puede estar integrado en el sistema operativo como algunos lectores de pantalla o puede ser un complemento como una extensión de Chrome.
La línea entre la tecnología de accesibilidad y la tecnología en general es borrosa. Después de todo, toda la tecnología está diseñada para ayudar a las personas con una tarea u otra. Y las tecnologías a menudo pueden entrar y salir de la categoría "asistencial".
Por ejemplo, uno de los primeros productos de síntesis de discurso comerciales fue una calculadora parlante para las personas ciegas. Ahora, la síntesis de voz está en todas partes, desde rutas en auto hasta asistentes virtuales. Por el contrario, la tecnología que originalmente era de uso general a menudo encuentra un uso asistivo. Por ejemplo, las personas con visión reducida pueden usar el zoom de la cámara de su smartphone para ver mejor algo pequeño en el mundo real.
En el contexto del desarrollo web, debemos considerar un rango diverso de tecnologías. Las personas pueden interactuar con tu sitio web mediante un lector de pantalla o una pantalla braille, con una lupa, mediante el control por voz, con un dispositivo de conmutación o con algún otro tipo de tecnología de accesibilidad que se adapte a la interfaz predeterminada de la página para crear una interfaz más específica que puedan utilizar.
Muchas de estas tecnologías de accesibilidad dependen de la semántica expresada de manera programática para crear una experiencia del usuario accesible, y de eso se trata la mayor parte de esta lección. Pero antes de poder explicar de manera programática la semántica expresada, debemos hablar un poco sobre las asignaciones.
Asignaciones
Cuando usamos una herramienta o un dispositivo fabricados por el hombre, solemos mirar su forma y diseño para tener una idea de qué hace y cómo funciona. Una asignación es cualquier objeto que ofrezca o le permita al usuario la oportunidad de realizar una acción. Cuanto mejor esté diseñado la indicación visual, más obvio o intuitivo será su uso.
Un ejemplo clásico es una tetera o tetera. Es fácil reconocer que debes tomarla de la asa, no del pico, incluso si nunca antes viste una tetera.
Eso se debe a que el valor es similar a los que viste en muchos otros objetos: regaderas, jarras de bebidas, tazas de café, etc. Probablemente podrías tomar el recipiente del pico, pero tu experiencia con condiciones similares te indica que la asa es la mejor opción.
En interfaces gráficas de usuario, las asignaciones representan acciones que podemos realizar, pero pueden ser ambiguas porque no hay un objeto físico con el que interactuar. Por lo tanto, las condiciones de la GUI están diseñadas específicamente para que no sean ambiguas: los botones, las casillas de verificación y las barras de desplazamiento se diseñaron para transmitir su uso con el menor entrenamiento posible.
Por ejemplo, puedes parafrasear el uso de algunos elementos de forma común (capacidades) de la siguiente manera:
- Botones de selección: "Puedo elegir una de estas opciones".
- Casilla de verificación: "Puedo elegir "sí" o "no" para esta opción.
- Campo de texto: "Puedo escribir algo en esta área".
- Menú desplegable: "Puedo abrir este elemento para mostrar mis opciones".
Puedes sacar conclusiones sobre estos elementos solo porque puedes verlos. Naturalmente, alguien que no puede ver las pistas visuales proporcionadas por un elemento no puede comprender su significado ni captar de manera intuitiva el valor de la indicación visual. Por lo tanto, debemos asegurarnos de que la información se exprese de manera lo suficientemente flexible como para que la tecnología de accesibilidad pueda crear una interfaz alternativa que se adapte a las necesidades del usuario y que pueda acceder a ella.
Esta exposición no visual del uso de una indicación visual se denomina semántica.
Lectores de pantalla
Un tipo popular de tecnología de accesibilidad es el lector de pantalla, un programa que permite que las personas con discapacidad visual usen computadoras leyendo el texto de la pantalla en voz alta con una voz generada. Para controlar lo que se lee, el usuario puede mover el cursor a un área relevante con el teclado.
Le pedimos a Victor Tsaran que nos explique cómo, en su condición de persona ciega, accede a la Web mediante un lector de pantalla integrado en OS X, llamado VoiceOver. Mira este video de Victor usando VoiceOver.
Ahora, es tu turno de usar un lector de pantalla. Esta es una página con ChromeVox Lite, un lector de pantalla mínimo, pero que funciona, escrito en JavaScript. La pantalla está desenfocada a propósito para simular una experiencia de baja visión y obligar al usuario a completar la tarea con un lector de pantalla. Por supuesto, tendrás que usar el navegador Chrome para este ejercicio.
Página de demostración de ChromeVox lite
Puedes usar el panel de control en la parte inferior de la pantalla para controlar el lector de pantalla. Este lector de pantalla tiene una funcionalidad mínima, pero puedes explorar el contenido con los botones Previous y Next, y puedes hacer clic en las opciones con el botón Click.
Intenta usar esta página con ChromeVox lite habilitado para conocer el uso del lector de pantalla. Piensa en el hecho de que un lector de pantalla (o alguna otra tecnología de accesibilidad) crea una experiencia del usuario alternativa completa para el usuario según la semántica expresada de manera programática. En lugar de una interfaz visual, el lector de pantalla brinda una interfaz sonora.
Observa cómo el lector de pantalla te brinda información sobre cada elemento de la interfaz. Un lector bien diseñado te dirá toda, o al menos la mayor parte, de la siguiente información sobre los elementos que encuentra.
- El rol o el tipo del elemento, si se especifica (debería).
- El nombre del elemento, si tiene uno (debería).
- El valor del elemento, si tiene uno (puede o no).
- El state del elemento, p. ej., si está habilitado o inhabilitado (si corresponde)
El lector de pantalla puede construir esta IU alternativa porque los elementos nativos contienen metadatos de accesibilidad integrados. Así como el motor de renderización usa el código nativo para construir una interfaz visual, el lector de pantalla usa los metadatos de los nodos del DOM para construir una versión accesible, similar a esta.
