أتمتة اختبار قارئ الشاشة على macOS باستخدام Auto VO

إذا كنت مهووسًا بإمكانية الوصول مثلي ، أو مهتمًا فقط بالتكنولوجيا المساعدة ، فستبحث في Auto-VO. Auto-VO هي وحدة عقدة و CLI للاختبار التلقائي لمحتوى الويب باستخدام قارئ الشاشة VoiceOver على macOS.

لقد قمت بإنشاء Auto VO لتسهيل الأمر على المطورين و PMs و 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٪ من الصفحات المقصودة على الويب على أخطاء واضحة يمكن التقاطها من خلال الاختبار والمراجعة الآليين.

هناك العديد من أدوات الاختبار والمراجعة الآلية ، بما في ذلك AccessLint.com لمراجعة التعليمات البرمجية الآلية (الإفصاح: لقد قمت ببناء AccessLint) ، و Axe ، وهو الانتقال الشائع للأتمتة. هذه الأدوات مهمة ومفيدة ، لكنها ليست سوى جزء من الصورة. الاختبار اليدوي مهم بنفس القدر أو ربما يكون أكثر أهمية ، ولكنه أيضًا يستغرق وقتًا طويلاً ويمكن أن يكون مخيفًا.

ربما تكون قد سمعت إرشادات حول "ما عليك سوى تشغيل قارئ الشاشة والاستماع" لمنحك إحساسًا بالتجربة العمياء. أعتقد أن هذا مضلل. برامج قراءة الشاشة عبارة عن تطبيقات متطورة قد تستغرق شهورًا أو سنوات لإتقانها ، وتكون هائلة في البداية. قد يؤدي استخدامه العشوائي لمحاكاة تجربة المكفوفين إلى الشعور بالأسف تجاه المكفوفين ، أو الأسوأ من ذلك ، محاولة "إصلاح" التجربة بالطرق الخاطئة.

لقد رأيت أشخاصًا يصابون بالذعر عندما يقومون بتمكين VoiceOver ، ولا يعرفون كيفية إيقاف تشغيله. يقوم Auto-VO بإدارة دورة حياة قارئ الشاشة نيابة عنك. إنه يقوم بأتمتة بدء تشغيل VoiceOver والتحكم فيه وإغلاقه ، حتى لا تضطر إلى ذلك. بدلاً من محاولة الاستماع والمتابعة ، يتم إرجاع الإخراج كنص ، والذي يمكنك بعد ذلك قراءته وتقييمه والتقاطه لاحقًا كمرجع في خطأ أو لقطة تلقائية.

إستعمال

مذكرة قانونية

في الوقت الحالي ، نظرًا لمتطلبات تمكين AppleScript لـ VoiceOver ، فقد يتطلب ذلك تكوينًا مخصصًا لأجهزة إنشاء CI ليتم تشغيلها.

السيناريو 1: ضمان الجودة والقبول

لنفترض أنني (المطور) لدي تصميم به تعليقات توضيحية بلون أزرق - حيث أضاف المصمم أوصافًا لأشياء مثل الاسم والدور الذي يمكن الوصول إليه. بمجرد إنشاء الميزة ومراجعة الترميز في أدوات تطوير Chrome أو Firefox ، أريد إخراج النتائج إلى ملف نصي بحيث عندما أضع علامة على الميزة على أنها مكتملة ، يمكن لمدير البرنامج مقارنة إخراج قارئ الشاشة بمواصفات التصميم . يمكنني القيام بذلك باستخدام 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. جربه واعلمني كيف ستسير الامور!