تركّز هذه الوحدة على استخدام التكنولوجيا المساعِدة (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>
إذا عدّلت كل العناصر بشكل صحيح، من المفترض ألا تظهر أي تغييرات مرئية، ولكن ستتحسن تجربة استخدام قارئ الشاشة بشكل كبير.
المشكلة 2: سياق الرابط
من المهم تقديم محتوى لمستخدمي برامج قراءة الشاشة يوضّح الغرض من الرابط وما إذا كان الرابط يعيد توجيههم إلى موقع جديد خارج الموقع الإلكتروني أو التطبيق.
في العرض التقديمي، أصلحنا معظم الروابط عندما عدّلنا النص البديل للصورة النشطة، ولكن هناك بعض الروابط الإضافية حول الأمراض المختلفة النادرة التي يمكن أن تستفيد من سياق إضافي، خاصةً وأنّها تؤدي إلى إعادة التوجيه إلى موقع جديد.
<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 المعدَّل لهذا العرض التجريبي.
يمكنك الآن استخدام ما تعلمته لمراجعة مدى سهولة استخدام مواقعك الإلكترونية وتطبيقاتك.
إنّ الهدف من كلّ اختبارات تسهيل الاستخدام هذه هو معالجة أكبر عدد ممكن من الصعوبات التي قد يواجهها المستخدم. ومع ذلك، لا يعني ذلك أنّه يمكن الوصول إلى موقعك الإلكتروني أو تطبيقك بشكلٍ مثالي بعد الانتهاء من عملية الفحص. يمكنك تحقيق أكبر قدر من النجاح من خلال تصميم موقعك الإلكتروني أو تطبيقك مع مراعاة تسهيل الاستخدام أثناء العملية، ودمج هذه الاختبارات مع اختباراتك الأخرى قبل الإطلاق.
التحقّق من فهمك
اختبِر معلوماتك حول اختبار إمكانية الاستخدام المبرمَج.
ما هو أفضل قارئ شاشة لاستخدامه في اختبار إمكانية الوصول؟
ما هو الغرض من الاختبار باستخدام التكنولوجيا المساعِدة؟