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

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

يستخدم اختبار تسهيل الاستخدام اليدوي اختبارات وأدوات وأساليب متعلقة بلوحة المفاتيح والرؤية والإدراك للعثور على المشاكل التي لا يمكن للأدوات المبرمَجة رصدها. بما أنّ الأدوات المبرمَجة لا تغطي جميع معايير النجاح المحدّدة في إرشادات 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، والتي تتضمّن جميع إصلاحات تسهيل الاستخدام الآلية واليدوية.

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