تركّز هذه الوحدة على استخدام التكنولوجيا المساعدة (AT) لاختبار تسهيل الاستخدام. يمكن للشخص من ذوي الاحتياجات الخاصة استخدام التكنولوجيا المساعدة للمساعدة في زيادة قدرات أداء مهمة أو الحفاظ عليها أو تحسينها.
في المساحة الرقمية، يمكن أن تكون التكنولوجيا المساعدة:
- منخفضة التقنية أو بدون تقنية: عصي الرأس والفم، والمكبّرات المحمولة باليد، والأجهزة ذات الأزرار الكبيرة
- عالية التقنية: الأجهزة المفعَّلة بالصوت، وأجهزة تتبُّع العين، ولوحات المفاتيح والفئران التكيّفية
- الأجهزة: أزرار التحكّم، ولوحات المفاتيح المريحة، وجهاز مخصّص للغة برايل يتم تحديثه تلقائيًا
- البرامج: برامج تحويل النص إلى كلام، والنسخ النصي التلقائي، وقارئات الشاشة
ننصحك باستخدام أنواع متعدّدة من التكنولوجيا المساعدة في سير عمل الاختبار العام.
أساسيات اختبار قارئ الشاشة
في هذه الوحدة، نركّز على إحدى أكثر التكنولوجيات المساعدة الرقمية شيوعًا، وهي قارئات الشاشة. قارئ الشاشة هو برنامج يقرأ الرمز الأساسي لموقع إلكتروني أو تطبيق، ثم يحوّل هذه المعلومات إلى كلام أو إخراج بلغة برايل للمستخدم.
تُعدّ قارئات الشاشة ضرورية للأشخاص الذين يعانون من الصمم والعمى، ولكن يمكنها أيضًا أن تفيد الأشخاص الذين يعانون من ضعف البصر واضطرابات القراءة والإعاقات المعرفية.
توافُق المتصفح
تتوفّر خيارات متعدّدة لقارئات الشاشة. أكثر قارئات الشاشة شيوعًا هي 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 | macOS | Safari |
| Orca | Linux | Firefox |
| TalkBack | Android | Chrome وFirefox |
| VoiceOver (للأجهزة الجوّالة) | iOS | Safari |
| ChromeVox | ChromeOS | Chrome |
أوامر قارئ الشاشة
بعد إعداد برنامج قارئ الشاشة بشكلٍ سليم لجهاز الكمبيوتر المكتبي أو الجهاز الجوّال، عليك الاطّلاع على مستندات قارئ الشاشة (المرتبطة في الجدول السابق) وتنفيذ بعض أوامر قارئ الشاشة الأساسية للتعرّف على هذه التكنولوجيا. إذا كنت قد استخدمت قارئ شاشة من قبل، ننصحك بتجربة قارئ شاشة جديد.
عند استخدام قارئ شاشة لاختبار تسهيل الاستخدام، يكون هدفك هو رصد المشاكل في الرمز التي تعيق استخدام موقعك الإلكتروني أو تطبيقك، وليس محاكاة تجربة مستخدم قارئ الشاشة. وبالتالي، يمكنك إجراء الكثير من الإجراءات باستخدام بعض المعارف الأساسية وبعض أوامر قارئ الشاشة وبعض الممارسة (القليلة أو الكثيرة).
إذا كنت بحاجة إلى فهم تجربة المستخدمين الذين يستخدمون قارئات الشاشة والتكنولوجيات المساعدة الأخرى بشكلٍ أكبر، يمكنك التواصل مع العديد من المؤسسات والأفراد للحصول على هذه المعلومات القيّمة. تذكّر أنّ استخدام تكنولوجيا مساعدة لاختبار الرمز مقابل مجموعة من القواعد وسؤال المستخدمين عن تجربتهم غالبًا ما يؤدي إلى نتائج مختلفة. كلاهما جانبان مهمّان لإنشاء منتجات شاملة تمامًا.
أوامر المفاتيح لقارئات الشاشة على الكمبيوتر المكتبي
| العنصر | NVDA (Windows) | VoiceOver (macOS) |
|---|---|---|
| مفاتيح الأوامر العامة | Insert | Control+Option |
| إيقاف الصوت | التحكّم | التحكّم |
| قراءة التالي/السابق | ↓ أو ↑ | Control+Option+← أو → |
| بدء القراءة | Insert↓ | Control+Option+A |
| قائمة العناصر/القرص الدوّار | NVDA + F7 | Control+Option+U |
| معالم | D | Control+Option+U |
| العناوين | H | Control+Option+Command+H |
| الروابط | K | Control+Option+Command+L |
| عناصر التحكّم بالنموذج | F | Control+Option+Command+J |
| الجداول | T | Control+OptionCommand+T |
| داخل الجداول | Insert Alt + ↓ ↑ ← → | Control+Option+↓ ↑ ← → |
أوامر المفاتيح لقارئات الشاشة على الأجهزة الجوّالة
| العنصر | TalkBack (Android) | VoiceOver (iOS) |
|---|---|---|
| استكشاف | اسحب إصبعًا واحدًا حول الشاشة | اسحب إصبعًا واحدًا حول الشاشة |
| اختيار أو تفعيل | النقر مرّتين | النقر مرّتين |
| التحرّك للأعلى أو للأسفل | مرِّر سريعًا للأعلى أو للأسفل بإصبعَين | مرِّر سريعًا للأعلى أو للأسفل باستخدام 3 أصابع |
| تغيير الصفحات | مرِّر سريعًا لليمين أو لليسار بإصبعَين | مرِّر سريعًا لليمين أو لليسار باستخدام 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 ضمن أقسام الأمراض النادرة. على الرغم من أنّ هذه الصورة ليست هي نفسها التي ناقشناها في وحدة الصور، يجب تعديل الصورة لأنّها تعيق تدفق المحتوى وقد تشتّت انتباه مستخدم قارئ الشاشة أو تربكه.
<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 المعدَّل لهذا العرض التوضيحي.
يمكنك الآن استخدام ما تعلّمته لمراجعة إمكانية الوصول إلى مواقعك الإلكترونية وتطبيقاتك.
الهدف من كل اختبارات تسهيل الاستخدام هذه هو معالجة أكبر عدد ممكن من المشاكل التي قد يواجهها المستخدم. ومع ذلك، لا يعني ذلك أنّ موقعك الإلكتروني أو تطبيقك يمكن الوصول إليهما بشكلٍ مثالي بعد الانتهاء. ستحقق أفضل النتائج من خلال تصميم موقعك الإلكتروني أو تطبيقك مع مراعاة تسهيل الاستخدام طوال العملية، ودمج هذه الاختبارات مع اختبارات ما قبل الإطلاق الأخرى.