أهمية ترتيب DOM التلقائي
يُعد العمل مع العناصر الأصلية طريقة رائعة للتعرف على سلوك التركيز لأنه يتم إدراجها تلقائيًا في ترتيب علامات التبويب بناءً على موضعها في DOM.
على سبيل المثال، قد يكون لديك ثلاثة عناصر أزرار، واحدًا تلو الآخر في
DOM. يؤدي الضغط على Tab إلى التركيز على كل زر بالترتيب. جرِّب النقر على مجموعة الرموز البرمجية
أدناه لنقل نقطة بداية التنقّل في التركيز، ثم اضغط على Tab لنقل التركيز
عبر الأزرار.
<button>I Should</button>
<button>Be Focused</button>
<button>Last!</button>
ومع ذلك، من المهم ملاحظة أنّه باستخدام CSS، من الممكن أن تظهر العناصر
بترتيب معيّن في نموذج DOM ولكن بترتيب مختلف على الشاشة. على سبيل المثال، إذا كنت تستخدم خاصية CSS مثل float لنقل زر واحد إلى اليمين،
تظهر الأزرار بترتيب مختلف على الشاشة. ولكن، نظرًا لأن ترتيبها في DOM يظل كما هو، فإن ترتيب علامات التبويب يظل كما هو. عندما يتنقل المستخدم عبر الصفحة، يتم التركيز على الأزرار بترتيب غير بديهي. انقر على مجموعة الرموز البرمجية أدناه لنقل نقطة بداية التنقّل، ثم اضغط على Tab لنقل التركيز بين الأزرار.
<button style="float: right">I Should</button>
<button>Be Focused</button>
<button>Last!</button>
يُرجى توخّي الحذر عند تغيير الموضع المرئي للعناصر على الشاشة باستخدام CSS. يمكن أن يؤدي ذلك إلى انتقال ترتيب علامات التبويب بشكل عشوائي على ما يبدو، ما يؤدي إلى إرباك المستخدمين الذين يعتمدون على لوحة المفاتيح. لهذا السبب، تنص قائمة التحقق من Web AIM في القسم 1.3.2 على أن ترتيب القراءة والتنقل، على النحو الذي يحدده ترتيب الرمز، يجب أن يكون منطقيًا وبديهيًا.
كقاعدة عامة، حاول التنقل عبر صفحاتك بين الحين والآخر للتأكد من أنك لم تفسد ترتيب علامات التبويب عن طريق الخطأ. إنّها عادة جيدة يمكن اتّباعها، ولا تتطلّب الكثير من الجهد.
محتوى خارج الشاشة
ماذا لو كان لديك محتوى لا يتم عرضه حاليًا، ولكنه لا يزال بحاجة إلى أن يكون في DOM، مثل شريط التنقل الجانبي سريع الاستجابة؟ عندما يكون لديك عناصر مثل هذه التي تتلقى التركيز عندما تكون خارج الشاشة، فقد يبدو الأمر كما لو أن التركيز يختفي ويعود للظهور عندما ينتقل المستخدم عبر الصفحة - من الواضح أنه تأثير غير مرغوب فيه. من الأفضل منع اللوحة من الحصول على التركيز عندما تكون خارج الشاشة، والسماح فقط بالتركيز عليها عندما يتمكّن المستخدم من التفاعل معها.
في بعض الأحيان، تحتاج إلى القيام ببعض أعمال التحري لمعرفة أين ذهب التركيز. يمكنك استخدام document.activeElement من وحدة التحكّم لمعرفة العنصر الذي يتم التركيز عليه حاليًا.
بعد معرفة العنصر خارج الشاشة الذي يتم التركيز عليه، يمكنك ضبطه على
display: none أو visibility: hidden، ثم إعادة ضبطه على display:
block أو visibility: visible قبل عرضه للمستخدم.
بشكل عام، نشجع المطورين على التنقل عبر مواقعهم قبل كل
نشر لمعرفة أن ترتيب علامات التبويب لا يختفي أو يقفز من تسلسل
منطقي. إذا كان الأمر كذلك، عليك التأكّد من إخفاء المحتوى خارج الشاشة بشكل مناسب باستخدام display: none أو visibility: hidden، أو إعادة ترتيب المواضع الفعلية للعناصر في نموذج كائن المستند (DOM) لتكون بترتيب منطقي.