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