Mengotomatiskan Pengujian Pembaca Layar Pada macOS Menggunakan VO Otomatis

Jika Anda seorang nerd aksesibilitas seperti saya, atau hanya ingin tahu tentang teknologi bantu, Anda akan menggali Auto-VO. Auto-VO adalah modul node dan CLI untuk pengujian otomatis konten web dengan pembaca layar VoiceOver di macOS.

Saya membuat VO Otomatis untuk memudahkan pengembang, PM, dan QA agar lebih cepat melakukan pengujian otomatis yang dapat diulang dengan teknologi bantu nyata, tanpa faktor intimidasi untuk mempelajari cara menggunakan pembaca layar.

Ayo pergi!

Pertama, mari kita lihat cara kerjanya, lalu saya akan membahas lebih detail tentang cara kerjanya. Berikut menjalankan auto-vo CLI di smashingmagazine.com untuk mendapatkan semua output VoiceOver sebagai teks.

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

Sepertinya struktur halaman yang masuk akal: kami memiliki tautan navigasi lewati, daftar yang terstruktur dengan baik, dan navigasi semantik. Kerja bagus! Mari kita menggali sedikit lebih dalam. Bagaimana struktur headingnya?

 $ 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! Ada yang sedikit funky dengan hierarki heading kami. Kita harus melihat garis besar, dengan satu judul tingkat satu dan hierarki yang teratur setelah itu. Sebagai gantinya, kami melihat sedikit ketidakcocokan level 1, level 2, dan level 4 yang salah. Ini perlu diperhatikan karena memengaruhi pengalaman pengguna pembaca layar saat menavigasi halaman.

Memiliki keluaran pembaca layar sebagai teks sangat bagus karena analisis semacam ini menjadi jauh lebih mudah.

Beberapa Latar Belakang

VoiceOver adalah pembaca layar di macOS. Pembaca layar memungkinkan orang membaca konten aplikasi dengan lantang, dan juga berinteraksi dengan konten. Artinya, orang dengan gangguan penglihatan atau tunanetra secara teori dapat mengakses konten, termasuk konten web. Namun dalam praktiknya, 98% halaman arahan di web memiliki kesalahan nyata yang dapat ditangkap dengan pengujian dan peninjauan otomatis.

Ada banyak alat pengujian dan peninjauan otomatis di luar sana, termasuk AccessLint.com untuk tinjauan kode otomatis (pengungkapan: Saya membuat AccessLint), dan Axe, tujuan umum untuk otomatisasi. Alat-alat ini penting dan berguna, tetapi itu hanya sebagian dari gambarannya. Pengujian manual sama atau mungkin lebih penting, tetapi juga lebih memakan waktu dan dapat mengintimidasi.

Anda mungkin pernah mendengar panduan untuk "hidupkan pembaca layar dan dengarkan" untuk memberi Anda gambaran tentang pengalaman buta. Saya pikir ini sesat. Pembaca layar adalah aplikasi canggih yang dapat memakan waktu berbulan-bulan atau bertahun-tahun untuk dikuasai, dan pada awalnya sangat melelahkan. Menggunakannya secara sembarangan untuk mensimulasikan pengalaman tunanetra mungkin membuat Anda merasa kasihan pada orang buta, atau lebih buruk lagi, mencoba "memperbaiki" pengalaman itu dengan cara yang salah.

Saya telah melihat orang panik ketika mereka mengaktifkan VoiceOver, tidak tahu cara mematikannya. Auto-VO mengelola siklus hidup pembaca layar untuk Anda. Ini mengotomatiskan peluncuran, kontrol, dan penutupan VoiceOver, jadi Anda tidak perlu melakukannya. Alih-alih mencoba mendengarkan dan mengikuti, output dikembalikan sebagai teks, yang kemudian dapat Anda baca, evaluasi, dan tangkap untuk nanti sebagai referensi dalam bug atau untuk snapshot otomatis.

Penggunaan

peringatan

Saat ini, karena persyaratan untuk mengaktifkan AppleScript untuk VoiceOver, ini mungkin memerlukan konfigurasi khusus mesin build CI untuk dijalankan.

Skenario 1: Tanya Jawab & Penerimaan

Katakanlah saya (pengembang) memiliki desain dengan anotasi garis biru - di mana desainer telah menambahkan deskripsi hal-hal seperti nama dan peran yang dapat diakses. Setelah saya membangun fitur dan meninjau markup di alat pengembang Chrome atau Firefox, saya ingin menampilkan hasilnya ke file teks sehingga ketika saya menandai fitur sebagai selesai, PM saya dapat membandingkan keluaran pembaca layar dengan spesifikasi desain . Saya bisa melakukannya menggunakan auto-vo CLI dan mengeluarkan hasilnya ke file atau terminal. Kami melihat contoh ini sebelumnya di artikel:

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

Skenario 2: Pengembangan Berbasis Uji

Di sini saya kembali sebagai pengembang, membangun fitur saya dengan desain beranotasi garis biru. Saya ingin menguji konten sehingga saya tidak perlu memfaktorkan ulang markup setelahnya agar sesuai dengan desain. Saya dapat melakukannya menggunakan modul simpul auto-vo yang diimpor ke test runner pilihan saya, misalnya 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); });

Dibawah tenda

Auto-VO menggunakan kombinasi skrip shell dan AppleScript untuk menggerakkan VoiceOver. Saat menggali ke dalam aplikasi VoiceOver, saya menemukan CLI yang mendukung memulai VoiceOver dari baris perintah.

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

Kemudian, serangkaian executable JavaScript mengelola instruksi AppleScript untuk menavigasi dan menangkap pengumuman VoiceOver. Misalnya, skrip ini mendapatkan frasa terakhir dari pengumuman pembaca layar:

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

Dalam Penutupan

Saya ingin mendengar pengalaman Anda dengan auto-vo , dan menyambut kontribusi di GitHub. Cobalah dan beri tahu saya bagaimana kelanjutannya!