تركّز هذه الوحدة على استخدام التكنولوجيا المساعِدة (AT) لاختبار تسهيل الاستخدام. يمكن لشخص يعاني من عجز استخدام تكنولوجيات مساعدة للمساعدة في زيادة قدراته على تنفيذ مهمة معيّنة أو الحفاظ عليها أو تحسينها.
في المجال الرقمي، يمكن أن تكون الأنشطة الترويجية على الإنترنت:
- أدوات تقنية منخفضة المستوى أو غير متوفرة: عصي الرأس والفم، والمكبّرات اليدوية، والأجهزة التي تحتوي على buttons كبيرة
- التكنولوجيا العالية: الأجهزة التي يتم تفعيلها بالصوت، وأجهزة تتبُّع العين، ولوحات المفاتيح والفئران التكيُّفية
- الأجهزة: أزرار التبديل ولوحات المفاتيح المريحة وأجهزة برايل التي تُعيد تحميل المحتوى تلقائيًا
- البرامج: برامج تحويل النص إلى كلام والنسخ النصي التلقائي وبرامج قراءة الشاشة
ننصحك باستخدام أنواع متعدّدة من أدوات الاختبار في سير عمل الاختبار العام.
أساسيات اختبار قارئ الشاشة
في هذه الوحدة، نركّز على أحد أشهر التقنيات المساعدة الرقمية، وهو برامج قراءة الشاشة. قارئ الشاشة هو برنامج يقرأ الرمز البرمجي الأساسي لأحد المواقع الإلكترونية أو التطبيقات، ثم يحوّل هذه المعلومات إلى إخراج ناتج بصوت عادي أو بلغة برايل للمستخدم.
برامج قراءة الشاشة ضرورية للمكفوفين والمكفوفين الصم، ولكنها يمكن أن تفيد أيضًا الأشخاص الذين يعانون من ضعف البصر واضطرابات القراءة والعجز المعرفي.
توافُق المتصفح
هناك العديد من خيارات قارئ الشاشة المتاحة. برامج قراءة الشاشة الأكثر شيوعًا هي JAWS وNVDA وVoiceOver لأجهزة الكمبيوتر المكتبي وVoiceOver وTalkback للأجهزة الجوّالة.
استنادًا إلى نظام التشغيل والمتصفّح المفضّل والجهاز الذي تستخدمه، قد يكون أحد برامج قراءة الشاشة هو الخيار الأفضل. تم تصميم معظم برامج قراءة الشاشة مع وضع أجهزة ومتصفّحات ويب معيّنة في الاعتبار. عند استخدام تطبيقات قراءة الشاشة مع متصفّح لم يتم ضبطه لها، قد تواجه المزيد من "الأخطاء" أو السلوك غير المتوقّع. تعمل برامج قراءة الشاشة بشكل أفضل عند استخدامها في المجموعات التالية.
| قارئ الشاشة | نظام التشغيل | توافُق المتصفح |
|---|---|---|
| الوصول إلى وظيفة مع تحويل النص إلى كلام (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 المعدَّل لهذا العرض التجريبي.
يمكنك الآن استخدام ما تعلمته لمراجعة مدى سهولة استخدام مواقعك الإلكترونية وتطبيقاتك.
الهدف من كل اختبارات إمكانية الوصول هذه هو معالجة أكبر عدد ممكن من المشكلات التي قد يواجهها المستخدم. ومع ذلك، لا يعني ذلك أنّه يمكن الوصول إلى موقعك الإلكتروني أو تطبيقك بشكلٍ مثالي بعد الانتهاء من عملية الفحص. يمكنك تحقيق أكبر قدر من النجاح من خلال تصميم موقعك الإلكتروني أو تطبيقك مع مراعاة تسهيل الاستخدام أثناء العملية، ودمج هذه الاختبارات مع اختبارات pre-launch testing (الاختبار قبل الإطلاق) الأخرى.
التحقّق من فهمك
اختبِر معلوماتك حول اختبار إمكانية الاستخدام المبرمَج
ما أفضل قارئ شاشة يمكن استخدامه لاختبار إمكانية الوصول؟
ما الغرض من الاختبار باستخدام التكنولوجيا المساعدة؟