Cómo comenzar a probar su sitio web con un lector de pantalla

No hay duda de la importancia de construir sitios web accesibles. Es un tema constante de discusión en la comunidad de diseño web. Y, en mi opinión, la mayoría de los diseñadores quieren hacerlo bien.

La accesibilidad nos afecta a todos de una forma u otra. Ya sean las palabras particulares utilizadas en una publicación de blog o la capacidad de navegar de una página a otra, es importante.

Pero si no eres alguien que confía en la tecnología de asistencia como un lector de pantalla, puede haber una desconexión. Es demasiado fácil pasar por alto cómo una característica determinada afecta a los usuarios. Eso es probable porque no lo hemos probado en ese contexto.

Admito que he luchado en esta área. Y apuesto a que hay muchos otros diseñadores que también lo han hecho. Mi privilegio como usuario vidente que navega con un mouse no siempre me ha llevado a considerar algunos aspectos importantes de la accesibilidad.

Cierto, pruebo con herramientas automatizadas. Me aseguro de que las fuentes sean legibles, el contraste de color cumpla con los estándares WCAG y las imágenes utilicen el atributo ALT. Esas son todas cosas buenas. Sin embargo, no representan la experiencia completa de usar un sitio web.

Entonces, ¿cómo llevamos las cosas al siguiente nivel? Probar su sitio web con un lector de pantalla es una excelente manera de comenzar. Echemos un vistazo de principiante a lo que está involucrado. A partir de ahí, compartiré lo que encontré durante mi experimentación.

Encuentra una aplicación de lector de pantalla

El primer paso en el proceso es encontrar una aplicación de lectura de pantalla adecuada. Puede que no tengas que ir muy lejos, ya que algunos sistemas operativos incluyen uno por defecto.

Los usuarios de Mac tienen acceso a VoiceOver, mientras que los usuarios de Windows pueden acceder a Narrador. Además, hay varias otras opciones disponibles para prácticamente todos los sistemas operativos. Por mi parte, voy con la aplicación de código abierto NVDA. Es de uso gratuito (con el apoyo de donaciones) y se encuentra entre las opciones más populares.

Independientemente de la aplicación que elija, es importante tener una comprensión básica de cómo funciona. Además, puede ser necesario hacer algunos ajustes de antemano. Por ejemplo, querrá asegurarse de que puede entender lo que se lee. También es posible que desee que el software resalte el contenido a medida que se lee, lo que facilita el seguimiento.

WebAIM ha elaborado algunas guías útiles para configurar varios lectores de pantalla con fines de prueba. Lo pondrán en una buena posición para ver qué tan accesible es su sitio web.

Moverse

Ahora que tiene listo un lector de pantalla confiable, ¡es hora de probarlo! Para tener una idea de la experiencia del usuario, intente recorrer las distintas partes de su sitio web a través de un teclado con el lector de pantalla habilitado.

Algunos comandos de teclado son más universales que otros. Por ejemplo, la tecla TAB lo llevará a varios enlaces y controles de formulario, mientras que ENTER lo llevará al destino de un enlace. La mayoría parece usar las teclas de flecha para moverse de una línea a otra.

Sin embargo, puede haber algunos comandos especiales que son específicos de una aplicación de lectura de pantalla. Permiten navegar entre encabezados, puntos de referencia como encabezados y pies de página, etc. Para eso, querrá consultar su documentación.

También vale la pena señalar que se necesita práctica para navegar de manera efectiva en un sitio web de esta manera. Los primeros intentos pueden ser un poco incómodos. Pero una vez que domines los diversos comandos, las cosas deberían volverse más intuitivas.

Mi experiencia con un lector de pantalla

Solo para aclarar las cosas, no soy un usuario experto en lectores de pantalla. Mi conocimiento es rudimentario en el mejor de los casos. Pero mi experiencia con NVDA ha sido esclarecedora.

Usé algunas páginas del sitio web de mi empresa como campo de pruebas. Y lo que encontré no fueron necesariamente fallas importantes. Se podía leer el texto y se podía navegar por el sitio.

Más bien, descubrí algunas molestias, cosas que comprensiblemente frustrarían a los usuarios. Repasemos algunos ejemplos:

Un control deslizante que interrumpe

En una entrevista con la experta en accesibilidad Taylor Arndt, mencionó los carruseles/presentaciones de diapositivas como características que pueden perjudicar la accesibilidad. Probar con un lector de pantalla trae eso a la vanguardia.

El carrusel automatizado que utilicé era navegable, pero tenía la desagradable costumbre de anunciarse cada vez que aparecía la siguiente diapositiva. Eso hizo que fuera muy difícil para el lector de pantalla llegar muy lejos a otras secciones de la página antes de ser interrumpido.

Encontré una solución bastante simple. El complemento deslizante de WordPress que utilizo (Soliloquy) tiene una opción para cambiar la región en vivo de ARIA a una configuración menos agresiva. Esto, junto con el uso de navegación manual para el carrusel, eliminó la molestia.

Texto repetitivo

Usar el atributo ALT con imágenes es un consejo común de accesibilidad. Pero para imágenes puramente decorativas, proporcionar texto descriptivo puede ser redundante. Me encontré con esto en algunas ocasiones diferentes.

Los listados de publicaciones en blogs fueron los principales culpables. Tanto el título de la publicación como los atributos ALT de la imagen destacada eran idénticos, lo que significa que el lector de pantalla los leyó dos veces. El resultado es que incluso una lista de publicaciones relativamente corta genera una UX dolorosa.

El punto conflictivo es que el bloque de listados de publicaciones de WordPress que utilicé no tiene una opción para dejar atributos ALT vacíos. Por lo tanto, es posible que se requiera una solución alternativa.

Descubra cómo funciona la accesibilidad del sitio web en la práctica

Crear sitios web que cumplan con los estándares WCAG es satisfactorio, y es lo que se supone que debemos hacer como diseñadores web. Pero marcar casillas en una lista de tareas pendientes no cuenta la historia completa.

Obtener una mejor comprensión de cómo los demás experimentarán su trabajo requiere un poco de esfuerzo adicional. Probar con un lector de pantalla proporciona un camino para obtener más información. Y aunque esta no es una guía completa, espero que ayude a despertar su interés y experimentar.

Como descubrí, incluso si se considera que un elemento es accesible por la letra de un estándar, eso no significa que sea fácil de usar. Es por eso que vale la pena cavar un poco más profundo. Puede ser la diferencia entre un sitio que simplemente se puede usar o uno que brinda la mejor experiencia posible.

Nota: Como se mencionó anteriormente, soy un novato en lo que respecta a esta tecnología. Si tiene sugerencias de lectores de pantalla para compartir, no dude en comunicarse conmigo a través de Twitter.