يعد تنفيذ ترتيب التنقل بـ Tab منطقي جزءًا مهمًا من تزويد المستخدمين بتجربة تنقل سلسة باستخدام لوحة المفاتيح. تتنقل برامج قراءة الشاشة والتقنيات المساعدة الأخرى في الصفحة بترتيب DOM. يجب أن يكون تدفق المعلومات منطقيًا.
كيفية إجراء الاختبار يدويًا
للتحقق مما إذا كان ترتيب التنقل بـ Tab في تطبيقك منطقيًا، حاول التنقل عبر صفحتك. بشكل عام، يجب أن يتبع التركيز ترتيب القراءة، الانتقال من اليسار إلى اليمين، من أعلى الصفحة إلى أسفلها.
هناك فكرتان رئيسيتان يجب أخذهما في الاعتبار عند تقييم ترتيب علامات التبويب:
- هل العناصر في DOM مرتبة بترتيب منطقي؟
- هل يتم إخفاء المحتوى خارج الشاشة بشكل صحيح من التنقل؟
لاحظ أي انتقالات تبدو مزعجة. لاحظ أيضًا أي انتقالات خارج الشاشة، حيث تنقلك علامة التبويب إلى محتوى لا ينبغي أن يكون مرئيًا.
تعرَّف على مزيد من المعلومات في أساسيات الوصول إلى لوحة المفاتيح.
كيفية إصلاحه
إذا كان ترتيب التركيز يبدو خاطئًا، فيجب عليك إعادة ترتيب العناصر في DOM لجعل ترتيب علامات التبويب أكثر تلقائية.
إذا استخدمت CSS لتغيير موضع العناصر بصريًا، فسيواجه مستخدمو التكنولوجيا المساعدة تنقل لا معنى له. بدلاً من استخدام CSS، انقل العنصر إلى موضع سابق في DOM.
إذا كان لا يزال بإمكانك الوصول إلى المحتوى خارج الشاشة بواسطة عناصر تحكم لوحة المفاتيح،
يمكنك إزالته باستخدام tabindex="-1".
يمكنك الاطّلاع على مزيد من المعلومات في مقالة التحكّم في التركيز باستخدام مؤشر Tabindex.