การทดสอบโปรแกรมอ่านหน้าจออัตโนมัติบน macOS โดยใช้ Auto VO

หากคุณเป็นคนเนิร์ดการช่วยการเข้าถึงเช่นฉัน หรือแค่อยากรู้เกี่ยวกับเทคโนโลยีอำนวยความสะดวก คุณจะต้องค้นหา Auto-VO Auto-VO คือโมดูลโหนดและ CLI สำหรับการทดสอบเนื้อหาเว็บแบบอัตโนมัติด้วยโปรแกรมอ่านหน้าจอ VoiceOver บน macOS

ฉันสร้าง Auto VO เพื่อให้นักพัฒนา, PM และ QA ทำการทดสอบอัตโนมัติที่ทำซ้ำได้รวดเร็วยิ่งขึ้นด้วยเทคโนโลยีอำนวยความสะดวกจริง โดยไม่ต้องเรียนรู้วิธีใช้โปรแกรมอ่านหน้าจอ

ไปกันเถอะ!

ขั้นแรก มาดูการใช้งานจริงกันก่อน จากนั้นฉันจะลงรายละเอียดเพิ่มเติมเกี่ยวกับวิธีการทำงาน นี่คือการเรียกใช้ auto-vo CLI บน smashingmagazine.com เพื่อรับเอาต์พุต VoiceOver ทั้งหมดเป็นข้อความ

 $ 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 ระดับ 2 และระดับที่ผิดพลาด 4 สิ่งนี้ต้องการความสนใจเนื่องจากจะส่งผลต่อประสบการณ์ของผู้ใช้โปรแกรมอ่านหน้าจอในการนำทางหน้า

การให้โปรแกรมอ่านหน้าจอแสดงผลเป็นข้อความนั้นยอดเยี่ยมเพราะการวิเคราะห์ประเภทนี้จะง่ายขึ้นมาก

พื้นหลังบางส่วน

VoiceOver เป็นตัวอ่านหน้าจอบน macOS โปรแกรมอ่านหน้าจอช่วยให้ผู้คนอ่านออกเสียงเนื้อหาของแอปพลิเคชันและโต้ตอบกับเนื้อหาได้ นั่นหมายความว่าผู้ที่มีสายตาเลือนรางหรือตาบอดในทางทฤษฎีสามารถเข้าถึงเนื้อหา ซึ่งรวมถึงเนื้อหาเว็บด้วย ในทางปฏิบัติ 98% ของหน้า Landing Page บนเว็บมีข้อผิดพลาดที่ชัดเจนซึ่งสามารถตรวจจับได้ด้วยการทดสอบและตรวจทานอัตโนมัติ

มีเครื่องมือทดสอบและตรวจทานอัตโนมัติมากมาย รวมถึง AccessLint.com สำหรับการตรวจสอบโค้ดอัตโนมัติ (การเปิดเผยข้อมูล: ฉันสร้าง AccessLint) และ Axe ซึ่งเป็นเครื่องมือทั่วไปที่ใช้กันทั่วไปสำหรับการทำงานอัตโนมัติ เครื่องมือเหล่านี้มีความสำคัญและมีประโยชน์ แต่เป็นเพียงส่วนหนึ่งของภาพเท่านั้น การทดสอบด้วยตนเองมีความสำคัญเท่าเทียมกันหรืออาจสำคัญกว่า แต่ก็ใช้เวลานานกว่าและอาจถึงขั้นข่มขู่ได้

คุณอาจเคยได้ยินคำแนะนำให้ “เพียงแค่เปิดโปรแกรมอ่านหน้าจอแล้วฟัง” เพื่อให้คุณรู้สึกถึงประสบการณ์ที่ตาบอด ฉันคิดว่านี่เป็นการเข้าใจผิด โปรแกรมอ่านหน้าจอเป็นแอปพลิเคชั่นที่ซับซ้อนซึ่งอาจใช้เวลาเป็นเดือนหรือเป็นปีกว่าจะเชี่ยวชาญ และในตอนแรกก็ใช้งานได้อย่างล้นหลาม การใช้แบบสุ่มตัวอย่างเพื่อจำลองประสบการณ์ตาบอดอาจทำให้คุณรู้สึกเสียใจกับคนตาบอด หรือแย่กว่านั้น พยายาม "แก้ไข" ประสบการณ์ด้วยวิธีที่ผิด

ฉันเคยเห็นผู้คนตื่นตระหนกเมื่อเปิดใช้งาน VoiceOver โดยไม่รู้ว่าต้องปิดอย่างไร Auto-VO จัดการวงจรชีวิตของโปรแกรมอ่านหน้าจอให้คุณ โดยจะทำให้การเปิด ควบคุม และปิด VoiceOver เป็นไปโดยอัตโนมัติ คุณจึงไม่ต้องทำเอง แทนที่จะพยายามฟังและติดตาม ผลลัพธ์จะถูกส่งกลับเป็นข้อความ จากนั้นคุณสามารถอ่าน ประเมิน และจับภาพเพื่อใช้เป็นข้อมูลอ้างอิงในจุดบกพร่องหรือสแนปชอตอัตโนมัติได้

การใช้งาน

ข้อแม้

ในขณะนี้ เนื่องจากข้อกำหนดในการเปิดใช้งาน AppleScript สำหรับ VoiceOver การดำเนินการนี้อาจต้องมีการกำหนดค่าเครื่องสร้าง CI แบบกำหนดเองจึงจะทำงานได้

สถานการณ์ที่ 1: QA & การยอมรับ

สมมติว่าฉัน (นักพัฒนา) มีการออกแบบที่มีคำอธิบายประกอบแบบ blueline ซึ่งผู้ออกแบบได้เพิ่มคำอธิบายของสิ่งต่างๆ เช่น ชื่อและบทบาทที่เข้าถึงได้ เมื่อฉันได้สร้างคุณลักษณะและตรวจสอบมาร์กอัปในเครื่องมือสำหรับนักพัฒนาของ 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 ฉันพบ CLI ที่รองรับการเริ่ม VoiceOver จากบรรทัดคำสั่ง

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

จากนั้น ชุดปฏิบัติการ JavaScript จะจัดการคำสั่ง AppleScript เพื่อนำทางและบันทึกประกาศของ VoiceOver ตัวอย่างเช่น สคริปต์นี้รับวลีสุดท้ายจากประกาศของโปรแกรมอ่านหน้าจอ:

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

ในการปิด

ฉันชอบที่จะได้ยินประสบการณ์ของคุณเกี่ยวกับ auto-vo และยินดีต้อนรับการมีส่วนร่วมใน GitHub ลองใช้งานและแจ้งให้เราทราบว่ามันเป็นอย่างไร!