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

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

في المجال الرقمي، يمكن أن تكون أنظمة المساعدة التقنية:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

الإصدار التجريبي لاختبار قارئ الشاشة

لاختبار العرض التوضيحي، استخدمنا 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 المحدّث لهذا الإصدار التجريبي.

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

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

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

اختبر معلوماتك حول اختبار إمكانية الوصول الآلي