Automatyzacja testowania czytnika ekranu w systemie macOS przy użyciu funkcji Auto VO

Jeśli jesteś frajerem ułatwiającym dostęp, takim jak ja, lub po prostu ciekawi Cię technologia wspomagająca, spodoba Ci się Auto-VO. Auto-VO to moduł węzła i interfejs wiersza polecenia do automatycznego testowania treści internetowych za pomocą czytnika ekranu VoiceOver w systemie macOS.

Stworzyłem Auto VO, aby ułatwić programistom, PMom i QA szybsze wykonywanie powtarzalnych, automatycznych testów z prawdziwą technologią wspomagającą, bez zastraszania związanego z nauką korzystania z czytnika ekranu.

Chodźmy!

Najpierw zobaczmy, jak działa, a potem omówię bardziej szczegółowo, jak to działa. Tutaj uruchamiam auto-vo CLI na smashingmagazine.com, aby uzyskać wszystkie dane wyjściowe VoiceOver jako tekst.

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

Wygląda na rozsądną strukturę strony: mamy linki do pomijania nawigacji, dobrze ustrukturyzowane listy i nawigację semantyczną. Świetna robota! Chodźmy jednak trochę głębiej. Jaka jest struktura nagłówka?

 $ 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! Coś jest trochę dziwacznego z naszą hierarchią pozycji. Powinniśmy zobaczyć zarys, z jednym nagłówkiem pierwszego poziomu i uporządkowaną hierarchią za nim. Zamiast tego widzimy trochę zamieszania na poziomie 1, 2 i błędnym poziomie 4. Wymaga to uwagi, ponieważ wpływa na wrażenia użytkowników czytników ekranu podczas poruszania się po stronie.

Posiadanie wyjścia czytnika ekranu w postaci tekstu jest świetne, ponieważ tego rodzaju analiza staje się znacznie łatwiejsza.

Niektóre tła

VoiceOver to czytnik ekranu w systemie macOS. Czytniki ekranu pozwalają ludziom czytać na głos zawartość aplikacji, a także wchodzić w interakcję z zawartością. Oznacza to, że osoby niedowidzące lub niewidome mogą teoretycznie uzyskać dostęp do treści, w tym treści internetowych. W praktyce jednak 98% stron docelowych w sieci zawiera oczywiste błędy, które można wychwycić dzięki automatycznym testom i przeglądom.

Istnieje wiele zautomatyzowanych narzędzi do testowania i przeglądu, w tym AccessLint.com do automatycznego przeglądania kodu (ujawnienie: zbudowałem AccessLint) i Axe, wspólne przejście do automatyzacji. Te narzędzia są ważne i przydatne, ale to tylko część obrazu. Testowanie ręczne jest równie ważne, a może nawet ważniejsze, ale jest też bardziej czasochłonne i może być onieśmielające.

Być może słyszałeś wskazówki, aby „włącz czytnik ekranu i posłuchaj”, aby poczuć niewidomy. Myślę, że jest to błędne. Czytniki ekranu to wyrafinowane aplikacje, których opanowanie może zająć miesiące lub lata i na początku przytłaczają. Używanie go przypadkowo do symulowania doświadczenia niewidomego może prowadzić do współczucia niewidomych lub, co gorsza, próbować „naprawić” to doświadczenie w niewłaściwy sposób.

Widziałem ludzi, którzy wpadali w panikę, gdy włączali VoiceOver, nie wiedząc, jak go wyłączyć. Auto-VO zarządza cyklem życia czytnika ekranu za Ciebie. Automatyzuje uruchamianie, sterowanie i zamykanie VoiceOver, więc nie musisz tego robić. Zamiast próbować nasłuchiwać i nadążyć, dane wyjściowe są zwracane jako tekst, który można następnie przeczytać, ocenić i przechwycić na później jako odniesienie w przypadku błędu lub do automatycznego tworzenia migawek.

Stosowanie

Zastrzeżenie

Obecnie, ze względu na wymóg włączenia AppleScript dla VoiceOver, może to wymagać niestandardowej konfiguracji maszyn do budowania CI.

Scenariusz 1: Kontrola jakości i akceptacja

Powiedzmy, że ja (deweloper) mam projekt z niebieskimi adnotacjami - gdzie projektant dodał opisy takich rzeczy, jak dostępna nazwa i rola. Po zbudowaniu funkcji i sprawdzeniu znaczników w narzędziach programistycznych Chrome lub Firefox chcę wyprowadzić wyniki do pliku tekstowego, aby po oznaczeniu funkcji jako ukończonej mój kierownik projektu mógł porównać dane wyjściowe czytnika ekranu ze specyfikacjami projektu . Mogę to zrobić za pomocą auto-vo CLI i wyprowadzając wyniki do pliku lub terminala. Przykład tego widzieliśmy wcześniej w artykule:

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

Scenariusz 2: Rozwój oparty na testach

Tutaj ponownie jestem deweloperem, budując swoją funkcję za pomocą projektu z niebieskimi adnotacjami. Chcę przetestować zawartość, aby nie musieć później korygować znaczników, aby dopasować je do projektu. Mogę to zrobić za pomocą modułu auto-vo node zaimportowanego do mojego preferowanego programu uruchamiającego testy, np. 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); });

Pod maską

Auto-VO wykorzystuje kombinację skryptów powłoki i AppleScript do obsługi VoiceOver. Zagłębiając się w aplikację VoiceOver, natknąłem się na CLI, który obsługuje uruchamianie VoiceOver z wiersza poleceń.

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

Następnie szereg plików wykonywalnych JavaScript zarządza instrukcjami AppleScript, aby nawigować i przechwytywać ogłoszenia VoiceOver. Na przykład ten skrypt pobiera ostatnią frazę z ogłoszeń czytnika ekranu:

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

W zamknięciu

Bardzo chciałbym poznać Twoje wrażenia z auto-vo i mile widziany wkład na GitHub. Wypróbuj i daj mi znać, jak to działa!