Auto VO를 사용하여 macOS에서 스크린 리더 테스트 자동화

저와 같은 접근성 괴짜이거나 보조 기술에 대해 궁금한 점이 있다면 Auto-VO를 파헤칠 것입니다. Auto-VO는 macOS에서 VoiceOver 스크린 리더를 사용하여 웹 콘텐츠를 자동으로 테스트하기 위한 노드 모듈 및 CLI입니다.

저는 개발자, PM, QA가 스크린 리더 사용법을 배우는 것에 대한 부담감 없이 실제 보조 기술을 사용하여 반복 가능한 자동화 테스트를 더 쉽게 수행할 수 있도록 Auto VO를 만들었습니다.

갑시다!

먼저 작동 방식을 살펴본 다음 작동 방식에 대해 자세히 설명하겠습니다. 다음은 모든 VoiceOver 출력을 텍스트로 얻기 위해 smashingmagazine.com에서 auto-vo CLI를 실행하고 있습니다.

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

합리적인 페이지 구조처럼 보입니다. 건너뛰기 탐색 링크, 잘 구성된 목록 및 의미 체계 탐색이 있습니다. 훌륭한 일! 그래도 조금 더 파고들어보자. 제목 구조는 어떻습니까?

 $ 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

흠! 제목 계층 구조가 약간 펑키합니다. 하나의 표제 수준이 1이고 그 뒤에 정렬된 계층 구조가 있는 개요가 표시되어야 합니다. 대신에 레벨 1, 레벨 2, 잘못된 레벨 4가 약간 뒤섞인 것을 볼 수 있습니다. 이는 페이지를 탐색하는 스크린 리더 사용자의 경험에 영향을 미치므로 주의가 필요합니다.

이러한 종류의 분석이 훨씬 쉬워지기 때문에 스크린 리더를 텍스트로 출력하는 것이 좋습니다.

일부 배경

VoiceOver는 macOS의 스크린 리더입니다. 스크린 리더를 사용하면 사람들이 애플리케이션 콘텐츠를 소리내어 읽고 콘텐츠와 상호 작용할 수 있습니다. 즉, 저시력자나 맹인이 이론상 웹 콘텐츠를 포함한 콘텐츠에 액세스할 수 있습니다. 그러나 실제로 웹상의 랜딩 페이지의 98%에는 자동화된 테스트 및 검토를 통해 캡처할 수 있는 명백한 오류가 있습니다.

자동화된 코드 검토를 위한 AccessLint.com(공개: AccessLint를 구축함)과 자동화를 위한 공통 도구인 Axe를 포함하여 많은 자동화된 테스트 및 검토 도구가 있습니다. 이러한 도구는 중요하고 유용하지만 그림의 일부일 뿐입니다. 수동 테스트는 동등하거나 더 중요하지만 시간이 더 많이 걸리고 두려울 수도 있습니다.

블라인드 경험의 느낌을 주기 위해 "스크린 리더를 켜고 들어라"는 지침을 들었을 것입니다. 나는 이것이 잘못된 것이라고 생각한다. 스크린 리더는 마스터하는 데 몇 달 또는 몇 년이 걸릴 수 있는 정교한 응용 프로그램이며 처음에는 압도적입니다. 맹목적인 경험을 시뮬레이트하기 위해 무작정 사용하면 시각 장애인을 불쌍히 여기거나 더 나쁜 방법으로 경험을 "수정"하려고 할 수 있습니다.

나는 사람들이 VoiceOver를 끄는 방법을 모르고 활성화할 때 당황하는 것을 보았습니다. Auto-VO는 스크린 리더의 수명 주기를 관리합니다. VoiceOver의 실행, 제어 및 닫기를 자동화하므로 그렇게 할 필요가 없습니다. 듣고 유지하려고 하는 대신 출력이 텍스트로 반환되며, 나중에 버그 또는 자동화된 스냅샷의 참조로 읽고, 평가하고, 캡처할 수 있습니다.

용법

경고

현재로서는 VoiceOver용 AppleScript를 활성화해야 하기 때문에 실행하려면 CI 빌드 시스템의 사용자 지정 구성이 필요할 수 있습니다.

시나리오 1: QA 및 승인

내가(개발자) 블루라인 주석이 있는 디자인이 있다고 가정해 봅시다. 디자이너가 액세스 가능한 이름 및 역할과 같은 항목에 대한 설명을 추가한 경우입니다. 기능을 빌드하고 Chrome 또는 Firefox 개발 도구에서 마크업을 검토한 후 기능을 완료로 표시할 때 PM이 화면 판독기 출력을 디자인 사양과 비교할 수 있도록 결과를 텍스트 파일로 출력하고 싶습니다. . auto-vo CLI를 사용하여 결과를 파일이나 터미널로 출력할 수 있습니다. 이 기사의 앞부분에서 이에 대한 예를 보았습니다.

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

시나리오 2: 테스트 주도 개발

여기에서 나는 다시 개발자로서 블루라인 주석이 달린 디자인으로 내 기능을 구축합니다. 나중에 디자인과 일치하도록 마크업을 리팩토링할 필요가 없도록 콘텐츠를 테스트하고 싶습니다. 내가 선호하는 테스트 실행기로 가져온 auto-vo 노드 모듈을 사용하여 이를 수행할 수 있습니다(예: 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); });

후드

Auto-VO는 셸 스크립팅과 AppleScript의 조합을 사용하여 VoiceOver를 구동합니다. VoiceOver 응용 프로그램을 조사하는 동안 명령줄에서 VoiceOver 시작을 지원하는 CLI를 발견했습니다.

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

그런 다음 일련의 JavaScript 실행 파일이 AppleScript 지침을 관리하여 VoiceOver 알림을 탐색하고 캡처합니다. 예를 들어, 이 스크립트는 스크린 리더 공지사항에서 마지막 문구를 가져옵니다.

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

마감 중

auto-vo 에 대한 경험을 듣고 GitHub에 대한 기여를 환영합니다. 그것을 시도하고 방법을 알려주세요!