Automatizarea testării cititorului de ecran pe macOS folosind Auto VO

Dacă ești un tocilar al accesibilității ca mine sau doar ești curios despre tehnologia de asistență, vei căuta Auto-VO. Auto-VO este un modul nod și CLI pentru testarea automată a conținutului web cu cititorul de ecran VoiceOver pe macOS.

Am creat Auto VO pentru a face mai ușor pentru dezvoltatori, PM și QA să efectueze mai rapid teste automate repetabile cu tehnologie de asistență reală, fără factorul de intimidare de a învăța cum să folosească un cititor de ecran.

Să mergem!

Mai întâi, să-l vedem în acțiune, apoi voi intra în mai multe detalii despre cum funcționează. Iată care rulează CLI auto-vo pe smashingmagazine.com pentru a obține toate rezultatele VoiceOver ca text.

 $ 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)

Pare o structură rezonabilă a paginii: avem link-uri de navigare săriți, liste bine structurate și navigare semantică. Buna treaba! Să săpăm totuși puțin mai adânc. Cum este structura titlurilor?

 $ 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

Hmm! Ceva e puțin ciudat cu ierarhia noastră de rubrici. Ar trebui să vedem o schiță, cu un nivel de titlu unu și o ierarhie ordonată după aceea. În schimb, vedem o mică mizerie de nivelul 1, nivelul 2 și un nivel rătăcit 4. Acest lucru necesită atenție, deoarece afectează experiența utilizatorilor cititorului de ecran de navigare pe pagină.

A avea rezultatul cititorului de ecran ca text este grozav, deoarece acest tip de analiză devine mult mai ușor.

Unele fundal

VoiceOver este cititorul de ecran pe macOS. Cititoarele de ecran permit utilizatorilor să citească cu voce tare conținutul aplicației și, de asemenea, să interacționeze cu conținutul. Aceasta înseamnă că persoanele cu vedere scăzută sau care sunt nevăzători pot, în teorie, să acceseze conținut, inclusiv conținut web. În practică, totuși, 98% dintre paginile de destinație de pe web au erori evidente care pot fi surprinse prin testare și revizuire automată.

Există multe instrumente automate de testare și revizuire, inclusiv AccessLint.com pentru revizuirea automată a codului (dezvăluire: am construit AccessLint) și Axe, o soluție comună pentru automatizare. Aceste instrumente sunt importante și utile, dar sunt doar o parte din imagine. Testarea manuală este la fel sau poate mai importantă, dar este, de asemenea, consumatoare de timp și poate fi intimidantă.

Este posibil să fi auzit îndrumări pentru „porniți cititorul de ecran și ascultați” pentru a vă oferi o senzație de experiență oarbă. Cred că acest lucru este greșit. Cititoarele de ecran sunt aplicații sofisticate care pot dura luni sau ani să stăpânească și sunt copleșitoare la început. Folosind-o la întâmplare pentru a simula experiența oarbă, te-ar putea face să-ți pară rău pentru oamenii orbi sau, mai rău, să încerci să „remediezi” experiența în moduri greșite.

Am văzut oameni intră în panică când activează VoiceOver, neștiind cum să-l dezactiveze. Auto-VO gestionează ciclul de viață al cititorului de ecran pentru dvs. Automatizează lansarea, controlul și închiderea VoiceOver, astfel încât să nu fie nevoie. În loc să încercați să ascultați și să țineți pasul, rezultatul este returnat ca text, pe care apoi îl puteți citi, evalua și captura pentru mai târziu ca referință într-o eroare sau pentru instantanee automate.

Utilizare

Avertisment

Momentan, din cauza cerinței de a activa AppleScript pentru VoiceOver, aceasta poate necesita configurarea personalizată a mașinilor de compilare CI pentru a rula.

Scenariul 1: QA și acceptare

Să presupunem că eu (dezvoltatorul) am un design cu adnotări în linie albastră - unde designerul a adăugat descrieri ale unor lucruri precum numele și rolul accesibil. După ce am creat caracteristica și am revizuit marcajul în instrumentele de dezvoltare Chrome sau Firefox, vreau să trimit rezultatele într-un fișier text, astfel încât, atunci când marchez caracteristica ca fiind completă, PM-ul meu să poată compara rezultatul cititorului de ecran cu specificațiile de proiectare . Pot face asta folosind CLI-ul auto-vo și scot rezultatele într-un fișier sau terminal. Am văzut un exemplu în acest sens mai devreme în articol:

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

Scenariul 2: Dezvoltare bazată pe teste

Iată-mă din nou în calitate de dezvoltator, construind funcția mea cu un design adnotat cu linia albastră. Vreau să testez conținutul, astfel încât să nu trebuiască să refactorizez ulterior marcajul pentru a se potrivi cu designul. Pot face asta folosind modulul nod auto-vo importat în rulerul meu de testare preferat, de exemplu 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); });

Sub capotă

Auto-VO folosește o combinație de script shell și AppleScript pentru a conduce VoiceOver. În timp ce am căutat în aplicația VoiceOver, am dat peste un CLI care acceptă pornirea VoiceOver din linia de comandă.

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

Apoi, o serie de executabile JavaScript gestionează instrucțiunile AppleScript pentru a naviga și a captura anunțuri VoiceOver. De exemplu, acest script primește ultima frază din anunțurile cititorului de ecran:

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

În încheiere

Mi-ar plăcea să aud experiența ta cu auto-vo și binevenite contribuțiile pe GitHub. Încearcă-l și spune-mi cum merge!