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