المسائل القانونية لترتيب DOM

أهمية ترتيب DOM التلقائي

Dave Gash

Meggin Kearney

Rob Dodson

ويُعدّ العمل باستخدام العناصر الأصلية طريقة رائعة للتعرّف على سلوك التركيز لأنّه يتم إدراجها تلقائيًا في ترتيب التنقل بـ Tab بناءً على موضعها في 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. ويمكن أن يؤدي ذلك إلى تغيير ترتيب علامات التبويب بشكل عشوائي على ما يبدو، ما يؤدي إلى إرباك المستخدِمين الذين يعتمدون على لوحة المفاتيح. لهذا السبب، تنص قائمة تحقق AIM على الويب في القسم 1.3.2 على أن ترتيب القراءة والتنقل، كما يتم تحديده حسب ترتيب الرمز، يجب أن يكون منطقيًا وبديهي.

كقاعدة، حاول التنقل في صفحاتك من حين لآخر للتأكد من أنك لم تفسر ترتيب علامات التبويب عن طريق الخطأ. هذه عادة جيدة يمكن اتّباعها، ولا تتطلّب الكثير من الجهد.

المحتوى الذي يظهر خارج الشاشة

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

في بعض الأحيان، عليك إجراء بعض التحري لمعرفة سبب عدم تركيزك. يمكنك استخدام document.activeElement من وحدة التحكّم لمعرفة العنصر الذي يتم التركيز عليه حاليًا.

بعد معرفة العنصر الذي يتم التركيز عليه خارج الشاشة، يمكنك ضبطه على display: none أو visibility: hidden، ثم ضبطه مرة أخرى على display: block أو visibility: visible قبل عرضه للمستخدم.

بشكل عام، ننصح المطوّرين بالتنقل بين صفحات مواقعهم الإلكترونية باستخدام مفتاح التبويب قبل كل عملية نشر للتأكّد من أنّ ترتيب التبويب لا يختفي أو يخرج من تسلسل منطقي. إذا حدث ذلك، عليك التأكّد من إخفاء المحتوى خارج الشاشة بشكل مناسب باستخدام display: none أو visibility: hidden، أو من إعادة ترتيب مواضع العناصر في نموذج كائن المستند (DOM) ليكونوا في ترتيب منطقي.