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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

يمكنك التحقّق من المحتوى المرئي لإعلامك بما يلي:

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

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

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

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

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

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

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

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

الخطوة 1

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

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

الخطوة 2

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

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

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

  :focus {
    outline: none;
  }

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

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

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

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

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

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

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

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