خريطة تختبر انتقال التركيز بلوحة المفاتيح: مشاريع تخرج هندسة البرمجيات

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

اختر مهمة وواجهة صغيرة

ابدأ بتدفق واحد، مثل فتح حوار تعديل اسم عنصر، وتغيير قيمة، ثم حفظ أو إلغاء. حدد نقطة البداية ومفاتيح التنقل المتوقعة لكل عنصر: Tab للتنقل العام، ومفاتيح الأسهم داخل نمط مركب إذا كان ذلك مناسباً، وEscape للإغلاق عند دعم النمط له. لا تفترض أن كل عنصر تفاعلي يتصرف بالطريقة نفسها. يعرف شرح W3C لمعيار WCAG 2.1.1 متطلب إتاحة الوظيفة باستخدام لوحة المفاتيح مع استثناءات محددة، ويوضح دليل WAI-ARIA APG لواجهة لوحة المفاتيح أنماط تفاعل شائعة للمكونات.

مثل التركيز كحالة ظاهرة

تعرف الحالة بعنصر DOM ذي focus، وحالة الصفحة مثل modal open أو menu expanded، ونوع المفاتيح المدخلة. الانتقال يسجل المفتاح والنتيجة: تغير العنصر، تغير سمة، أو بقاء التركيز. لا تكتف بتصوير تسلسل Tab لأن الشبكة قد تختلف عند وجود عنصر مخفي أو مشروط. خزّن selector مستقراً أو سمة اختبار، ولقطة صغيرة من نص العنصر حتى يستطيع المراجع فهم المسار. احذر تخزين بيانات مستخدمين أو نصوص إدخال حقيقية؛ استخدم صفحة اختبار مع بيانات اصطناعية.

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

مثال حوار تعديل

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

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

اكتشف الدوران والضياع

يمكن اكتشاف مصيدة واضحة إذا تكرر مسار صغير من حالات focus ولم يستطع السيناريو بلوغ زر الإغلاق أو العنصر التالي المتوقع. لكن loop قد يكون مقصوداً داخل بعض الحوارات أو مكونات ذات أسهم. لذلك لا تصنف الحلقة خللاً تلقائياً؛ قارنها بوصف pattern المستخدم وبطريقة خروج معلنة. اعرض «حلقة محتملة» مع المسار بدل علامة امتثال حمراء. كما أن عنصرين قد يحملان النص نفسه، فلا تعتمد على النص وحده لتعريف العقدة.

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

قارن المسار المتوقع بالمرصود

أنشئ fixtures لمسار طبيعي، حوار لا يعيد focus، قائمة أسهم، عنصر disabled، عنصر مخفي بقي قابلاً للتركيز، وحقل يظهر بعد رسالة. لكل fixture اكتب المسار المتوقع يدوياً. خط الأساس تشغيل المهمة بلوحة مفاتيح حقيقية من المتصفح وتسجيل النقاط يدوياً؛ قارن عدد الحالات التي يفوتها البرنامج وعدد تنبيهاته الزائدة. يجب أن يعيد التقرير تشغيل المهمة من بداية واضحة وأن يعرض عناصر المسار.

لا تستخدم عدد tab presses كمقياس جودة وحيد؛ ترتيب DOM قد يتضمن عناصر لا تظهر للمستخدم في المهمة. افحص الترتيب المرئي وسياق المجموعة. أضف اختباراً حين يتعطل قارئ الصفحة أو لا يمكن الوصول إلى محتوى تحميله، لكن اشرح أن التحقق الآلي لا يغطي كل إخراج assistive technology. يبقى اختبار يدوي مع التقنيات المساعدة خطوة منفصلة.

تسليم مشروع التخرج

تتكون النسخة الأولى من قائمة مهام مصرح بها، محرك اختبار لواجهة واحدة، عارض رسم حالات، وخمس حالات فشل مع خطوات إعادة إنتاج. أرفق الملف الذي يحدد قواعد كل مكون وإصدار browser ونتائج الاختبار الخام. يمكن تطويرها ضمن مشاريع التخرج أو مشروع تطوير تطبيق ويب. لا تسم الأداة «مدقق WCAG كامل» ولا تضع شارة امتثال بسبب اجتياز مسار واحد؛ هي تقلل صعوبة تتبع التركيز وتساعد فريقاً على توثيق الفجوات في نطاق معروف.