قد تظهر نافذة الحوار بألوان الشركة الصحيحة وتغطي الخلفية، لكن مستخدم لوحة المفاتيح يستمر في التنقل بين روابط الصفحة خلفها. وقد يغلقها فيفقد موضعه تمامًا. مراجعة modal تحتاج اختبار حركة التركيز ومعنى النافذة، وليس شكلها المرئي فقط؛ ويمكن إجراء ذلك مع الحفاظ على هوية الواجهة.
ابدأ من زر الفتح واسم النافذة
افتح الحوار بلوحة المفاتيح وسجل أول عنصر يستقبل التركيز. يقدم نمط W3C للحوار المشروط إرشادات لنقل التركيز إلى الداخل وحصر Tab وShift+Tab فيه والإغلاق باستخدام Escape. اختيار أول عنصر يعتمد على حجم المحتوى وطبيعته؛ أحيانًا يكون عنوانًا قابلًا للتركيز أنسب من زر أسفل نص طويل.
راجع الاسم الذي يعلنه قارئ الشاشة وعلاقته بعنوان ظاهر، مع تسمية واضحة لزر الإغلاق. لا تعتبر إضافة aria-modal وحدها تنفيذًا لسلوك النافذة؛ يجب أن تتطابق دلالتها مع منع التفاعل بالخلفية وإدارة التركيز. استخدم مكونًا معروف السلوك أو عنصرًا أصليًا ملائمًا ثم اختبر الناتج الفعلي.
نفذ دورة تنقل كاملة
- انتقل إلى زر الفتح واضغط مفتاح التفعيل المناسب.
- تنقل إلى آخر عنصر ثم إلى الأول باستخدام Tab، وكرر في الاتجاه العكسي.
- تحقق من عدم وصول التركيز إلى محتوى الخلفية أثناء فتح الحوار.
- أغلق عبر Escape ثم عبر زر الإغلاق في تجربة أخرى، وراجع موضع العودة.
هذا مسار اختبار مقترح، وليس إعلان توافق شامل مع WCAG. راجع ظهور مؤشر التركيز والتباين والتكبير والقارئ الذي تدعمه المؤسسة. في واجهة RTL يجب أن يعكس ترتيب DOM تسلسلًا مفهومًا؛ نقل الأزرار بصريًا لا يكفي إذا ظل ترتيب التنقل مخالفًا للمعنى.
جرب المحتوى الطويل والإجراء المؤثر
في مثال افتراضي لحوار شروط طويل، قد يؤدي وضع التركيز على زر الموافقة في النهاية إلى إخفاء بداية النص. اختبر عنوانًا في البداية ومساحة تمرير مفهومة. وفي تأكيد حذف يصعب التراجع عنه، راجع وضع التركيز الأول على خيار أقل إضرارًا وفق طبيعة العملية بدل دفع المستخدم إلى الحذف الافتراضي.
إذا حذفت النافذة العنصر الذي فتحها، قد لا يعود زر الفتح موجودًا. حدد وجهة منطقية تالية، مثل العنصر المجاور أو عنوان القائمة، واختبر إعلان النتيجة. لا تنقل التركيز إلى أعلى الصفحة دون سبب، ولا تتركه على عنصر أزيل من المستند.
احتفظ بدليل قابل لإعادة الاختبار
سجل المكون والمتصفح وطريقة الفتح ومسار التركيز والنتيجة الفعلية. راجع هذه الحالات ضمن تصميم الواجهة وتجربة المستخدم وتنفيذ الموقع. وإذا كان الحوار يحتوي نموذجًا، أكمل مراجعة رسائله وتسمياته ضمن إتاحة النماذج العربية. النافذة المقبولة تتيح إتمام العمل والخروج والعودة بوضوح، مع بقاء التصميم متناسقًا.
