Automatización de la prueba del lector de pantalla en macOS usando Auto VO

Si eres un nerd de la accesibilidad como yo, o simplemente sientes curiosidad por la tecnología de asistencia, te encantará Auto-VO. Auto-VO es un módulo de nodo y CLI para pruebas automatizadas de contenido web con el lector de pantalla VoiceOver en macOS.

Creé Auto VO para facilitar a los desarrolladores, PM y control de calidad la realización más rápida de pruebas automatizadas y repetibles con tecnología de asistencia real, sin el factor de intimidación de aprender a usar un lector de pantalla.

¡Vamos!

Primero, veámoslo en acción y luego entraré en más detalles sobre cómo funciona. Aquí está ejecutando auto-vo CLI en smashingmagazine.com para obtener toda la salida de VoiceOver como texto.

 $ auto-vo --url https://smashingmagazine.com --limit 200 > output.txt $ cat output.txt link Jump to all topics link Jump to list of all articles link image Smashing Magazine list 6 items link Articles link Guides 2 of 6 link Books 3 of 6 link Workshops 4 of 6 link Membership 5 of 6 More menu pop up collapsed button 6 of 6 end of list end of navigation ...(truncated)

Parece una estructura de página razonable: tenemos enlaces de omisión de navegación, listas bien estructuradas y navegación semántica. ¡Buen trabajo! Sin embargo, profundicemos un poco más. ¿Cómo es la estructura de encabezados?

 $ cat output.txt | grep heading heading level 2 link A Complete Guide To Accessibility Tooling heading level 2 link Spinning Up Multiple WordPress Sites Locally With DevKinsta heading level 2 link Smashing Podcast Episode 39 With Addy Osmani: Image Optimization heading level 2 2 items A SMASHING GUIDE TO Accessible Front-End Components heading level 2 2 items A SMASHING GUIDE TO CSS Generators & Tools heading level 2 2 items A SMASHING GUIDE TO Front-End Performance 2021 heading level 4 LATEST POSTS heading level 1 link When CSS Isn't Enough: JavaScript Requirements For Accessible Components heading level 1 link Web Design Done Well: Making Use Of Audio heading level 1 link Useful Front-End Boilerplates And Starter Kits heading level 1 link Three Front-End Auditing Tools I Discovered Recently heading level 1 link Meet :has, A Native CSS Parent Selector (And More) heading level 1 link From AVIF to WebP: A New Smashing Book By Addy Osmani

¡Mmm! Hay algo raro con nuestra jerarquía de encabezados. Deberíamos ver un esquema, con un encabezado de nivel uno y una jerarquía ordenada después de eso. En su lugar, vemos una mezcla de nivel 1, nivel 2 y un nivel 4 errante. Esto requiere atención, ya que afecta la experiencia de navegación de la página de los usuarios de lectores de pantalla.

Tener la salida del lector de pantalla como texto es excelente porque este tipo de análisis se vuelve mucho más fácil.

algunos antecedentes

VoiceOver es el lector de pantalla en macOS. Los lectores de pantalla permiten que las personas lean el contenido de la aplicación en voz alta y también interactúen con el contenido. Eso significa que las personas con baja visión o ciegas pueden, en teoría, acceder al contenido, incluido el contenido web. Sin embargo, en la práctica, el 98 % de las páginas de destino en la web tienen errores evidentes que se pueden capturar con pruebas y revisiones automatizadas.

Existen muchas herramientas de prueba y revisión automatizadas, incluido AccessLint.com para la revisión automática de código (divulgación: construí AccessLint) y Axe, un recurso común para la automatización. Estas herramientas son importantes y útiles, pero son solo una parte del panorama. Las pruebas manuales son igual o quizás más importantes, pero también consumen más tiempo y pueden resultar intimidantes.

Es posible que haya escuchado una guía para "simplemente encienda su lector de pantalla y escuche" para darle una idea de la experiencia ciega. Creo que esto está equivocado. Los lectores de pantalla son aplicaciones sofisticadas que pueden llevar meses o años dominar, y al principio resultan abrumadoras. Usarlo al azar para simular la experiencia ciega puede llevarte a sentir lástima por las personas ciegas o, peor aún, tratar de "arreglar" la experiencia de manera incorrecta.

He visto a personas entrar en pánico cuando habilitan VoiceOver, sin saber cómo desactivarlo. Auto-VO administra el ciclo de vida del lector de pantalla por usted. Automatiza el inicio, el control y el cierre de VoiceOver, para que no tengas que hacerlo tú. En lugar de tratar de escuchar y mantenerse al día, la salida se devuelve como texto, que luego puede leer, evaluar y capturar para más tarde como referencia en un error o para una instantánea automática.

Uso

Advertencia

En este momento, debido al requisito de habilitar AppleScript para VoiceOver, esto puede requerir una configuración personalizada de las máquinas de compilación de CI para ejecutarse.

Escenario 1: control de calidad y aceptación

Digamos que yo (el desarrollador) tengo un diseño con anotaciones blueline, donde el diseñador ha agregado descripciones de cosas como el nombre y el rol accesibles. Una vez que construí la función y revisé el marcado en las herramientas de desarrollo de Chrome o Firefox, quiero enviar los resultados a un archivo de texto para que cuando marque la función como completa, mi PM pueda comparar la salida del lector de pantalla con las especificaciones de diseño. . Puedo hacerlo usando la CLI auto-vo y enviando los resultados a un archivo o terminal. Vimos un ejemplo de esto anteriormente en el artículo:

 $ auto-vo --url https://smashingmagazine.com --limit 100

Escenario 2: desarrollo basado en pruebas

Aquí estoy nuevamente como desarrollador, desarrollando mi función con un diseño anotado de línea azul. Quiero probar el contenido para no tener que refactorizar el marcado después para que coincida con el diseño. Puedo hacerlo usando el módulo de nodo auto-vo importado a mi corredor de prueba preferido, por ejemplo, Mocha.

 $ npm install --save-dev auto-vo import { run } from 'auto-vo'; import { expect } from 'chai'; describe('loading example.com', async () => { it('returns announcements', async () => { const options = { url: 'https://www.example.com', limit: 10, until: 'Example' }; const announcements = await run(options); expect(announcements).to.include.members(['Example Domain web content']); }).timeout(5000); });

Bajo el capó

Auto-VO utiliza una combinación de secuencias de comandos de shell y AppleScript para controlar VoiceOver. Mientras buscaba en la aplicación VoiceOver, encontré una CLI que admite iniciar VoiceOver desde la línea de comandos.

 /System/Library/CoreServices/VoiceOver.app/Contents/MacOS/VoiceOverStarter

Luego, una serie de ejecutables de JavaScript administran las instrucciones de AppleScript para navegar y capturar anuncios de VoiceOver. Por ejemplo, este script obtiene la última frase de los anuncios del lector de pantalla:

 function run() { const voiceOver = Application('VoiceOver'); return voiceOver.lastPhrase.content(); }

Para concluir

Me encantaría escuchar su experiencia con auto-vo y agradecería las contribuciones en GitHub. ¡Pruébalo y cuéntame cómo te va!