Otomatik VO Kullanarak macOS'ta Ekran Okuyucu Testini Otomatikleştirme

Benim gibi bir erişilebilirlik meraklısıysanız veya yalnızca yardımcı teknolojiyi merak ediyorsanız, Auto-VO'yu kazacaksınız. Auto-VO, macOS'ta VoiceOver ekran okuyucuyla web içeriğinin otomatik olarak test edilmesi için bir düğüm modülü ve CLI'dir.

Geliştiricilerin, PM'lerin ve QA'nın, ekran okuyucu kullanmayı öğrenmenin göz korkutucu faktörü olmadan gerçek yardımcı teknolojiyle tekrarlanabilir, otomatikleştirilmiş testleri daha hızlı gerçekleştirmesini kolaylaştırmak için Auto VO'yu oluşturdum.

Hadi gidelim!

Önce, eylemde görelim ve sonra nasıl çalıştığı hakkında daha fazla ayrıntıya gireceğim. İşte tüm VoiceOver çıktılarını metin olarak almak için smashingmagazine.com'da auto-vo CLI çalıştırıyor.

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

Makul bir sayfa yapısı gibi görünüyor: atlamalı gezinme bağlantılarına, iyi yapılandırılmış listelere ve anlamsal gezinmeye sahibiz. Harika iş! Yine de biraz daha derine inelim. Başlık yapısı nasıl?

 $ 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! Başlık hiyerarşimizde biraz tuhaf bir şeyler var. Bir başlık seviyesi ve ondan sonra sıralı bir hiyerarşi ile bir anahat görmeliyiz. Bunun yerine, biraz 1. düzey, 2. düzey ve hatalı bir 4. düzey karışıklık görüyoruz. Ekran okuyucu kullanıcılarının sayfada gezinme deneyimini etkilediği için buna dikkat edilmesi gerekiyor.

Ekran okuyucu çıktısının metin olarak olması harika çünkü bu tür analizler çok daha kolay hale geliyor.

Bazı Arka Plan

VoiceOver, macOS'taki ekran okuyucudur. Ekran okuyucular, insanların uygulama içeriğini yüksek sesle okumasına ve ayrıca içerikle etkileşime girmesine olanak tanır. Bu, az gören veya görme engelli kişilerin teorik olarak web içeriği de dahil olmak üzere içeriğe erişebileceği anlamına gelir. Ancak pratikte, web'deki açılış sayfalarının %98'inde otomatik test ve inceleme ile tespit edilebilecek bariz hatalar vardır.

Otomatik kod incelemesi için AccessLint.com (açıklama: AccessLint'i ben oluşturdum) ve otomasyon için yaygın olarak kullanılan Axe dahil olmak üzere birçok otomatik test ve inceleme aracı vardır. Bu araçlar önemli ve kullanışlıdır, ancak resmin yalnızca bir parçasıdır. Manuel test aynı derecede veya belki daha önemlidir, ancak aynı zamanda daha fazla zaman alır ve göz korkutucu olabilir.

Size körlük deneyimi hakkında bir fikir vermek için "ekran okuyucunuzu açın ve dinleyin" yönergesini duymuş olabilirsiniz. Bunun yanlış yönlendirildiğini düşünüyorum. Ekran okuyucular, ustalaşması aylar veya yıllar sürebilen ve ilk başta bunaltıcı olan karmaşık uygulamalardır. Kör deneyimi simüle etmek için gelişigüzel kullanmak, kör insanlar için üzülmenize veya daha kötüsü, deneyimi yanlış yollarla “düzeltmeye” çalışmanıza neden olabilir.

VoiceOver'ı nasıl kapatacaklarını bilmeden etkinleştirdiklerinde panikleyen insanlar gördüm. Auto-VO, ekran okuyucunun yaşam döngüsünü sizin için yönetir. VoiceOver'ın başlatılmasını, denetlenmesini ve kapanmasını otomatikleştirir, böylece sizin yapmanıza gerek kalmaz. Dinlemeye ve yetişmeye çalışmak yerine, çıktı metin olarak döndürülür ve daha sonra bir hatada referans olarak veya otomatik anlık görüntü için daha sonra okuyabileceğiniz, değerlendirebileceğiniz ve yakalayabileceğiniz çıktı.

kullanım

Uyarı

Şu anda, VoiceOver için AppleScript'i etkinleştirme gereksinimi nedeniyle, bunun çalışması için CI oluşturma makinelerinin özel yapılandırması gerekebilir.

Senaryo 1: KG ve Kabul

Diyelim ki (geliştirici) mavi çizgi ek açıklamaları olan bir tasarımım var - tasarımcının erişilebilir ad ve rol gibi şeylerin açıklamalarını eklediği yer. Özelliği oluşturduktan ve Chrome veya Firefox geliştirme araçlarındaki işaretlemeyi inceledikten sonra, sonuçları bir metin dosyasına göndermek istiyorum, böylece özelliği tamamlandı olarak işaretlediğimde, PM'm ekran okuyucu çıktısını tasarım özellikleriyle karşılaştırabilir . Bunu auto-vo CLI kullanarak ve sonuçları bir dosyaya veya terminale vererek yapabilirim. Bunun bir örneğini daha önce makalede gördük:

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

Senaryo 2: Teste Dayalı Geliştirme

Yine geliştirici olarak buradayım ve özelliğimi mavi çizgili açıklamalı bir tasarımla oluşturuyorum. Daha sonra tasarıma uyması için işaretlemeyi yeniden düzenlememe gerek kalmaması için içeriği test etmek istiyorum. Bunu, tercih edilen test çalıştırıcıma, örneğin Mocha'ya aktarılan otomatik vo düğüm modülünü kullanarak yapabilirim.

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

Kaputun Altında

Auto-VO, VoiceOver'ı çalıştırmak için kabuk komut dosyası oluşturma ve AppleScript kombinasyonunu kullanır. VoiceOver uygulamasını araştırırken, VoiceOver'ın komut satırından başlatılmasını destekleyen bir CLI ile karşılaştım.

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

Ardından, bir dizi JavaScript yürütülebilir dosyası, VoiceOver duyurularında gezinmek ve bunları yakalamak için AppleScript talimatlarını yönetir. Örneğin, bu komut dosyası, ekran okuyucu duyurularındaki son ifadeyi alır:

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

Kapanışta

auto-vo ile ilgili deneyiminizi duymak isterim ve GitHub'a katkılarınızı memnuniyetle karşılarım. Deneyin ve nasıl gittiğini bana bildirin!