اختبار إمكانية الوصول اليدوي

أساسيات الاختبار اليدوي

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

مع تقدّم التكنولوجيا، يمكن أن تغطي الأدوات المبرمَجة وحدها المزيد من الاختبارات، ولكن في الوقت الحالي، يجب إضافة عمليات التحقّق اليدوية وعمليات التحقّق باستخدام التكنولوجيا المساعِدة إلى بروتوكولات الاختبار لتغطية جميع نقاط التحقّق السارية في "إرشادات إمكانية الوصول إلى محتوى الويب" (WCAG).

مزايا اختبارات تسهيل الاستخدام اليدوية:

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

عيوب اختبارات تسهيل الاستخدام اليدوية:

• أكثر تعقيدًا وتستغرق وقتًا أطول من الاختبارات المبرمَجة
• قد يصعب تكرارها على نطاق واسع
• تتطلّب المزيد من الخبرة في إمكانية الوصول لإجراء الاختبارات وتفسير النتائج

قارِن بين عناصر تسهيل الاستخدام والتفاصيل التي يمكن لأداة مبرمَجة رصدها وتلك التي لا يمكن رصدها.

أنواع الاختبارات اليدوية

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

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

عمليات التحقّق من لوحة المفاتيح

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

تجيب اختبارات لوحة المفاتيح عن أسئلة مثل:

• هل تتطلّب صفحة الويب أو الميزة استخدام ماوس لتعمل؟
• هل ترتيب الانتقال بين علامات التبويب منطقي وسهل الاستخدام؟
• هل يظهر مؤشر تركيز لوحة المفاتيح دائمًا؟
• هل يمكن أن تتعذّر مغادرة عنصر لا يفترض أن يحبس التركيز؟
• هل يمكنك التنقّل خلف عنصر أو حوله من المفترض أن يحصر التركيز؟
• عند إغلاق عنصر تم التركيز عليه، هل عاد مؤشر التركيز إلى مكان منطقي؟

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

عمليات التحقّق المرئية

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

يمكن أن توضّح لك عمليات التحقّق المرئية ما يلي:

• هل هناك مشاكل في تباين الألوان لا يمكن لأداة مبرمَجة رصدها، مثل النص فوق تدرّج أو صورة؟
• هل هناك أي عناصر تبدو كعناوين وقوائم وعناصر بنيوية أخرى ولكن لم يتم ترميزها على هذا النحو؟
• هل روابط التنقّل ومدخلات النماذج متّسقة في جميع أقسام الموقع الإلكتروني أو التطبيق؟
• هل هناك أي وميض أو تأثيرات ضوئية أو رسوم متحركة تتجاوز التوصيات؟
• هل يتضمّن المحتوى مسافات مناسبة؟ بالنسبة إلى الأحرف والكلمات والأسطر والفقرات؟
• هل يمكنك رؤية كل المحتوى باستخدام مكبّر شاشة أو تكبير المتصفح؟

عمليات التحقّق من المحتوى

على عكس الاختبارات المرئية التي تركّز على التنسيقات والحركة والألوان، تركّز عمليات التحقّق من المحتوى على الكلمات الواردة في الصفحة. لا يجب أن تنظر إلى النص فقط، بل يجب مراجعة السياق للتأكّد من أنّه مفهوم للآخرين.

تساعد عمليات التحقّق من المحتوى في الإجابة عن أسئلة مثل:

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

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

عرض توضيحي: اختبار يدوي

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

الخطوة 1

يتضمّن العرض التوضيحي المحدّث على CodePen جميع التعديلات التلقائية المتعلقة بإمكانية الوصول.

يمكنك الاطّلاع عليه في وضع تصحيح الأخطاء للمتابعة إلى الاختبارات التالية. هذا الإجراء مهم لأنه يزيل <iframe> الذي يحيط بصفحة الويب التجريبية، ما قد يتعارض مع بعض أدوات الاختبار. مزيد من المعلومات حول وضع تصحيح الأخطاء في CodePen

الخطوة 2

ابدأ عملية الاختبار اليدوي من خلال وضع الماوس أو لوحة اللمس جانبًا والتنقّل للأعلى والأسفل في نموذج المستند (DOM) باستخدام لوحة المفاتيح فقط.

المشكلة 1: مؤشر التركيز المرئي

من المفترض أن تلاحظ على الفور المشكلة الأولى المتعلقة بلوحة المفاتيح، أو بالأحرى، من المفترض ألا تلاحظها، لأنّه تمت إزالة مؤشر التركيز المرئي. عند فحص CSS في العرض التوضيحي، من المفترض أن تجد السطر "outline: none" المضاف إلى قاعدة الرموز البرمجية.

  :focus {
    outline: none;
  }

لنحاول إصلاح هذه المشكلة.

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

:focus {
  outline: 3px dotted #008576;
}

المشكلة 2: ترتيب التركيز

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

<input type="email" placeholder="Enter your e-mail address" aria-hidden="true" tabindex="-1" required>

لنحاول إصلاح هذه المشكلة.

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

<input type="email" placeholder="Enter your e-mail address" aria-hidden="true" required>

الخطوة 3

بعد التحقّق من تركيز لوحة المفاتيح، ننتقل إلى عمليات التحقّق من العناصر المرئية والمحتوى.

المشكلة 3: تباين ألوان الروابط

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

لكي تكون صفحتنا سهلة الاستخدام، يجب أن تبرز الروابط عن النص المحيط بها وأن تتضمّن تغييرًا في النمط غير اللون عند تمرير مؤشر الماوس وتركيز لوحة المفاتيح.

لنحلّ هذه المشكلة.

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

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

عند الاطّلاع على العرض التوضيحي باستخدام أداة التحقّق من تباين الروابط، ستلاحظ أنّ لون الرابط يستوفي متطلبات تباين الألوان بنسبة 4.5:1 بين النص العادي والخلفية. ومع ذلك، يجب أن تستوفي الروابط غير المسطّرة أيضًا متطلبات تباين الألوان بنسبة 3:1 مع النص المحيط.

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

المشكلة 4: تباين ألوان الرموز

من المشاكل الأخرى التي لم يتم رصدها في تباين الألوان هي رموز وسائل التواصل الاجتماعي. في وحدة الألوان والتباين، تعلّمت أنّ الرموز الأساسية يجب أن تستوفي نسبة تباين الألوان 3:1 مع الخلفية. ومع ذلك، في العرض التوضيحي، تبلغ نسبة التباين في أيقونات وسائل التواصل الاجتماعي 1.3:1.

لنحلّ هذه المشكلة.

للوفاء بمتطلبات تباين الألوان بنسبة 3:1، يتم تغيير رموز وسائل التواصل الاجتماعي إلى اللون الرمادي الداكن.

المشكلة 5: تخطيط المحتوى

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

p.bullet {
   text-align: justify;
}

لنحاول إصلاح هذه المشكلة.

لإعادة ضبط محاذاة النص في العرض التوضيحي، يمكنك تعديل الرمز إلى text-align: left; أو إزالة هذا السطر بالكامل من CSS، لأنّ المحاذاة التلقائية للمتصفحات هي إلى اليسار. احرص على اختبار الرمز البرمجي، فقد تؤدي الأنماط الموروثة الأخرى إلى إزالة المحاذاة التلقائية للنص.

p.bullet {
   text-align: left;
}

الخطوة 4

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

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

الخطوة التالية

أحسنت! لقد أكملت وحدات الاختبار الآلي واليدوي. يمكنك الاطّلاع على النسخة المعدَّلة من CodePen، التي تتضمّن جميع إصلاحات تسهيل الاستخدام التلقائية واليدوية.

الآن، انتقِل إلى وحدة الاختبار الأخيرة التي تركّز على اختبار التكنولوجيا المساعدة.