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

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

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

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

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

• طريقة واضحة وسريعة التشغيل بشكل معقول
• رصد نسبة مئوية أعلى من المشاكل مقارنةً بالاختبارات الآلية وحدها
• القليل من الأدوات والخبرة اللازمة للنجاح

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

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

لنقارن بين عناصر وتفاصيل إمكانية الوصول التي يمكن رصدها حاليًا بواسطة أداة مبرمَجة، وتلك التي لن يتم رصدها.

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

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

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

عمليات فحص لوحة المفاتيح

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

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

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

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

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

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

يمكن أن تطلعك عمليات التحقّق المرئي على ما يلي:

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

عمليات فحص المحتوى

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

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

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

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

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

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

الخطوة 1

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

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

الخطوة 2

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

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

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

  :focus {
    outline: none;
  }

يُرجى حلّ المشكلة.

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

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

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

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

<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: تباين ألوان الرابط

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

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

يمكنك حلّ المشكلة.

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

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

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

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

التحقّق من استيعابك

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