ترتيب Tab المنطقي يتبع المحتوى

اضغط Tab، وسينتقل التركيز عبر مسار ثابت في الصفحة. يُسمى هذا المسار ترتيب التنقل باستخدام Tab، وضبطه بشكل صحيح يحافظ على اتجاه المستخدمين. 🧭

يطابق ترتيب Tab افتراضيًا ترتيب المصدر، أي تسلسل العناصر من الأعلى إلى الأسفل في HTML، لا ما تراه على الشاشة.

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

تنقل أدوات التخطيط مثل flexbox order الصناديق بصريًا، لكنها لا تغيّر DOM. لذلك يظل التركيز يتبع المصدر، وقد يختلف المساران.

عندما يعيد CSS ترتيب العناصر، قد ينتقل مستخدم لوحة المفاتيح إلى الخلف والأمام بشكل غير متوقع. والحل هو محاذاة ترتيب HTML مع الترتيب المرئي.

تجبر قيمة tabindex موجبة مثل 3 عنصر تحكم على التقدم إلى مقدمة الترتيب. وهذا ينشئ تقريبًا دائمًا فوضى مربكة يصعب صيانتها.

بدلًا من ترقيع المشكلة باستخدام tabindex، ضع العناصر ببساطة في الترتيب الصحيح داخل الترميز. فلا يحتاج ترتيب المصدر النظيف إلى سمات خاصة.

يخرج العنصر الذي يستخدم display none من ترتيب Tab بالكامل. وعند إظهاره مجددًا، يعود بهدوء إلى موضعه في DOM.

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

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

التحقق بسيط. ابدأ من الأعلى باستخدام Tab، وتأكد من أن التركيز يتحرك بترتيب منطقي دون قفزات مفاجئة عبر الشاشة.

حافظ على تحرك التركيز بالطريقة التي يقرأ بها الأشخاص. طابق ترتيب المصدر مع التخطيط المرئي، وتجنب tabindex الموجب، واختبر النتيجة باستخدام Tab. ✅