اختبار التكنولوجيا المساعِدة

تركّز هذه الوحدة على استخدام التكنولوجيا المساعِدة (AT) لاختبار تسهيل الاستخدام. يمكن لشخص يعاني من عجز استخدام تكنولوجيات مساعدة للمساعدة في زيادة قدراته على تنفيذ مهمة معيّنة أو الحفاظ عليها أو تحسينها.

في الفضاء الرقمي، يمكن أن تكون الأنشطة الترويجية على الإنترنت:

  • أدوات بسيطة أو لا تتطلّب تكنولوجيا متقدمة: عصي الرأس والفم، والمكبّرات اليدوية، والأجهزة التي تحتوي على buttons كبيرة
  • التكنولوجيا العالية: الأجهزة التي يتم تفعيلها بالصوت، وأجهزة تتبُّع العين، ولوحات المفاتيح والفئران التكيُّفية
  • الأجهزة: أزرار التبديل ولوحات المفاتيح المريحة وأجهزة برايل التي تُعيد تحميل المحتوى تلقائيًا
  • البرامج: برامج تحويل النص إلى كلام والنسخ النصي التلقائي وبرامج قراءة الشاشة

ننصحك باستخدام أنواع متعدّدة من أدوات الاختبار في سير عمل الاختبار العام.

أساسيات اختبار قارئ الشاشة

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

برامج قراءة الشاشة ضرورية للمكفوفين والمكفوفين الصم، ولكنها يمكن أن تفيد أيضًا الأشخاص الذين يعانون من ضعف البصر واضطرابات القراءة والعجز المعرفي.

توافُق المتصفح

تتوفّر خيارات متعدّدة لقارئ الشاشة. قارئو الشاشة الأكثر شيوعًا هم JAWS وNVDA وVoiceOver لأجهزة الكمبيوتر المكتبي وVoiceOver وTalkback للأجهزة الجوّالة.

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

قارئ الشاشة نظام التشغيل توافُق المتصفح
Job Access With Speech (JAWS) Windows Chrome وFirefox وEdge
Non-Visual Desktop Access (NVDA) Windows Chrome وFirefox
الراوي Windows Edge
VoiceOver نظام التشغيل Mac Safari
Orca Linux Firefox
TalkBack Android Chrome وFirefox
VoiceOver (للأجهزة الجوّالة) iOS Safari
ChromeVox ChromeOS Chrome

أوامر قارئ الشاشة

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

عند استخدام قارئ شاشة لاختبار تسهيل الاستخدام، يكون هدفك هو رصد المشاكل في الرمز البرمجي التي تتداخل مع استخدام موقعك الإلكتروني أو تطبيقك، وليس محاكاة تجربة مستخدم قارئ الشاشة. وبالتالي، هناك الكثير مما يمكنك فعله باستخدام بعض المعلومات الأساسية وبعض أوامر قارئ الشاشة وقليل من التمارين (أو الكثير منها).

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

أوامر المفاتيح لبرامج قراءة الشاشة على أجهزة الكمبيوتر المكتبي

العنصر NVDA (نظام التشغيل Windows) VoiceOver (نظام التشغيل macOS)
مفاتيح الطلبات العامة إدراج Control+Option
إيقاف الصوت التحكّم التحكّم
قراءة المحتوى التالي/السابق أو Control+Option+ أو
بدء القراءة إدراج Control+Option+A
قائمة العناصر/الدوار NVDA ‏+ F7 Control+Option+U
معالم د Control+Option+U
العناوين ح Control+Option+Command+H
الروابط K Control+Option+Command+L
عناصر التحكّم في النموذج Control+Option+Command+J
الجداول T Control+OptionCommand+T
ضمن الجداول إدراج Alt + Control+Option+

أوامر المفاتيح لبرامج قراءة الشاشة على الأجهزة الجوّالة

العنصر TalkBack (لأجهزة Android) VoiceOver (لأجهزة iOS)
استكشاف اسحب إصبعًا واحدًا على الشاشة. اسحب إصبعًا واحدًا على الشاشة.
اختيار أو تفعيل النقر مرتين النقر مرتين
الانتقال للأعلى أو للأسفل مرِّر سريعًا للأعلى أو للأسفل بإصبعين. التمرير سريعًا للأعلى أو للأسفل باستخدام ثلاثة أصابع
تغيير الصفحات التمرير سريعًا لليمين أو لليسار باستخدام إصبعَين مرِّر سريعًا لليمين أو لليسار باستخدام 3 أصابع.
التالي/السابق التمرير سريعًا لليمين أو لليسار باستخدام إصبع واحد التمرير سريعًا لليمين أو لليسار باستخدام إصبع واحد

عرض توضيحي لاختبار قارئ الشاشة

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

الخطوة 1

يُرجى الانتقال إلى CodePen المعدَّل الذي تم فيه تطبيق جميع تعديلات تسهيل الاستخدام التلقائية واليدوية.

اطّلِع عليه في وضع تصحيح الأخطاء لمتابعة الاختبار ات التالية. هذا الإجراء مهمّ، لأنّه يزيل الرمز <iframe> الذي يحيط بصفحة الويب التجريبية، ما قد يتداخل مع بعض أدوات الاختبار. اطّلِع على مزيد من المعلومات عن وضع تصحيح الأخطاء في CodePen.

الخطوة 2

فعِّل قارئ الشاشة الذي تختاره وانتقِل إلى صفحة العرض التجريبية. ننصحك بالانتقال في الصفحة بأكملها من أعلى إلى أسفل قبل التركيز على مشاكل معيّنة.

سجّلنا قارئ الشاشة لكل مشكلة، قبل تطبيق الإصلاحات وبعدها على الإصدار التجريبي. ننصحك بتجربة العرض التقديمي باستخدام قارئ الشاشة الخاص بك.

المشكلة 1: بنية المحتوى

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

إذا حاولت التنقّل باستخدام أيّ من العنصرَين في العرض التجريبي، ستكتشف سريعًا أنّهما غير متوفّرين.

  • مثال على المَعلم: <div class="main">...</div>
  • مثال على العنوان: <p class="h1">Join the Club</p>

إذا كنت قد عدّلت كل شيء بشكل صحيح، من المفترض ألا تظهر أي تغييرات مرئية، ولكن ستتحسن تجربة قارئ الشاشة بشكل كبير.

استمع إلى قارئ الشاشة وهو ينتقل في هذه المشكلة.
لنحاول حلّ هذه المشكلة.

لا يمكن ملاحظة بعض العناصر التي يتعذّر الوصول إليها من خلال الاطّلاع على الموقع الإلكتروني فقط. قد تتذكر من وحدة بنية المحتوى أهمية مستويات العناوين وHTML الدلالي. قد تبدو قطعة من المحتوى كعنوان، ولكنّ المحتوى في الواقع مُدرَج في <div> منمّق.

لحلّ مشكلة العناوين والمعالم، عليك أولاً تحديد كل عنصر يجب وضع علامة عليه على هذا النحو وتعديل ملف HTML ذي الصلة. احرص على تعديل ملف CSS ذي الصلة أيضًا.

  • مثال على المَعلم: <main>...</main>
  • مثال على العنوان: <h1>Join the Club</h1>

إذا عدّلت كل العناصر بشكل صحيح، من المفترض ألا تظهر أي تغييرات مرئية، ولكن ستتحسن تجربة استخدام قارئ الشاشة بشكل كبير.

بعد أن أصلحنا بنية المحتوى، استمع إلى قارئ الشاشة وهو يتنقّل في العرض التجريبي مرة أخرى.

من المهم تقديم محتوى لمستخدمي برامج قراءة الشاشة يوضّح الغرض من الرابط وما إذا كان الرابط يعيد توجيههم إلى موقع جديد خارج الموقع الإلكتروني أو التطبيق.

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

<a href="https://rarediseases.org/rare-diseases/maple-syrup-urine-disease">
  Maple syrup urine disease (MSUD)
</a>
استمع إلى قارئ الشاشة وهو ينبِّهك إلى هذه المشكلة.
لنحاول حلّ هذه المشكلة.

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

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

<a href="https://rarediseases.org/rare-diseases/maple-syrup-urine-disease"
  aria-label="Learn more about Maple syrup urine disease on the Rare Diseases website.">
  Maple syrup urine disease (MSUD)
</a>
بعد أن أصلحنا سياق الرابط، يمكنك الاستماع إلى قارئ الشاشة وهو يتنقّل في العرض التجريبي مرة أخرى.

المشكلة 3: صورة زخرفية

في وحدة الاختبار الآلي، لم يتمكّن Lighthouse من رصد ملف SVG المضمّن الذي يُعدّ الصورة الرئيسية لشاشة البداية في صفحتنا التجريبية. ومع ذلك، يعثر تكنولوجيات قراءة الشاشة على العنصر ويعرّفه على أنّه "صورة" بدون تقديم معلومات إضافية. وينطبق ذلك حتى بدون إضافة سمة role="img" صراحةً إلىملف SVG.

<div class="section-right">
  <svg>...</svg>
</div>
استمع إلى قارئ الشاشة وهو ينتقل في هذه المشكلة.
لنحاول حلّ هذه المشكلة.

لحلّ هذه المشكلة، علينا أولاً تحديد ما إذا كانت الصورة مفيدة أو ديكورية. استنادًا إلى هذا القرار، يجب إضافة النص البديل المناسب للصورة (صورة هادفة ) أو إخفاء الصورة عن مستخدمي أدوات قراءة الشاشة (صورة زخرفية).

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

<div class="section-right">
  <svg role="presentation">...</svg>
</div>
بعد أن أصلحنا الصورة الزخرفية، استمع إلى قارئ الشاشة وهو يتنقّل في العرض التجريبي.

المشكلة 4: زخرفة النقاط

ربما لاحظت أنّ قارئ الشاشة يقرأ صورة علامة التبويب في CSS ضمن أقسام الأمراض النادرة. على الرغم من أنّ هذه الصورة ليست من النوع التقليدي الذي discussed في وحدة الصور، يجب تعديلها لأنّها تؤدي إلى إيقاف تدفق المحتوى وقد تؤدي إلى تشتيت انتباه مستخدم قارئ الشاشة أو إحداث ارتباك لديه.

<p class="bullet">...</p>
استمع إلى قارئ الشاشة وهو ينبِّهك إلى هذه المشكلة.
لنحاول حلّ هذه المشكلة.

تمامًا مثل مثال الصورة الزخرفية الذي سبق ذكره، يمكنك إضافة رمز role="presentation" إلى رمز HTML مع فئة علامة النقطة لإخفائه من قارئ الشاشة. وبالمثل، يمكن استخدام role="none". احرص فقط على عدم استخدام aria-hidden: true وإلا ستخفي كل معلومات الفقرة عن مستخدمي تطبيقات قراءة الشاشة.

<p class="bullet" role="none">...</p>

المشكلة 5: حقل النموذج

في وحدة النماذج، تعرّفنا على أنّ جميع حقل النماذج يجب أن يكون لها أيضًا تصنيف مرئي وبرمجي. يجب أن يظل هذا التصنيف مرئيًا في جميع الأوقات.

في العرض الترويجي، لا يتوفّر تصنيف مرئي وبرمجي في حقل بريد إلكتروني لاشتراك في النشرة الإخبارية. هناك عنصر عنصر نائب نصي، ولكنّه لا يحلّ محل التصنيف لأنّه ليس ثابتًا من الناحية المرئية ولا يتوافق بالكامل مع جميع برامج قراءة الشاشة.

<form>
  <div class="form-group">
    <input type="email" placeholder="Enter your e-mail address" required>
    <button type="submit">Subscribe</button>
  </div>
</form>
استمع إلى قارئ الشاشة وهو ينبِّهك إلى هذه المشكلة.
لنحاول حلّ هذه المشكلة.

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

<form>
  <div class="form-group">
    <input type="email" required id="youremail" name="youremail" type="text">
    <label for="youremail">Enter your e-mail address</label>
    <button type="submit" aria-label="Subscribe to our newsletter">Subscribe</button>
  </div>
</form>
بعد أن أصلحنا النموذج، يمكنك الاستماع إلى قارئ الشاشة وهو يتنقل في العرض التجريبي.

الخاتمة

تهانينا! أنّك أكملت جميع الاختبارات لهذا العرض التوضيحي يمكنك التمعن في كل هذه التغييرات في Codepen المعدَّل لهذا العرض التجريبي.

يمكنك الآن استخدام ما تعلمته لمراجعة مدى سهولة استخدام مواقعك الإلكترونية وتطبيقاتك.

إنّ الهدف من كلّ اختبارات تسهيل الاستخدام هذه هو معالجة أكبر عدد ممكن من الصعوبات التي قد يواجهها المستخدم. ومع ذلك، لا يعني ذلك أنّه يمكن الوصول إلى موقعك الإلكتروني أو تطبيقك بشكلٍ مثالي بعد الانتهاء من عملية الفحص. يمكنك تحقيق أكبر قدر من النجاح من خلال تصميم موقعك الإلكتروني أو تطبيقك مع مراعاة تسهيل الاستخدام أثناء العملية، ودمج هذه الاختبارات مع اختباراتك الأخرى قبل الإطلاق.

التحقّق من فهمك

اختبِر معلوماتك حول اختبار إمكانية الاستخدام المبرمَج.

ما هو أفضل قارئ شاشة لاستخدامه في اختبار إمكانية الوصول؟

JAWS
على الرغم من أنّ JAWS هو أحد برامج قراءة الشاشة الأكثر رواجًا، إلا أنّه ليس بالضرورة الخيار الأفضل.
VoiceOver
‫VoiceOver هي أداة لمستخدمي نظامَي التشغيل macOS وiOS. إذا كنت تستخدم جهاز كمبيوتر شخصيًا يعمل بنظام التشغيل Windows ، عليك استخدام أداة مختلفة.
Orca
يُستخدم Orca مع متصفّح Firefox على نظام التشغيل Linux، ما قد يعني أنّك بحاجة إلى استخدام أداة مختلفة.
لا يوجد
تم تصميم كل قارئ شاشة لجهاز أو نظام تشغيل أو متصفّح معيّن، لذا يعتمد الخيار الأنسب لك على طريقة الاختبار. إذا كانت لديك تحليلات أو أبحاث توفّر لك مزيدًا من المعلومات عن المستخدِمين الذين يستخدمون برامج قراءة الشاشة، قد يكون من المفيد إجراء الاختبار باستخدام برامج قراءة الشاشة نفسها التي يستخدمونها.

ما هو الغرض من الاختبار باستخدام التكنولوجيا المساعِدة؟

للاستفادة من الميزات نفسها التي يستفيد منها المستخدمون الذين يستخدمون تكنولوجيا المساعدة
لا يمكنك محاكاة تجربة المستخدم الذي يستخدم تكنولوجيات مساعدة. لن يكون اختبار في إحدى الحالات مماثلاً للتجارب الأخرى.
لاختبار العيوب في موقعك الإلكتروني أو تطبيقك
يساعد اختبار تسهيل الاستخدام المطوّرين في العثور على المشاكل التي قد يواجهها مستخدمو AT وحلّها على موقعهم الإلكتروني أو تطبيقهم.