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

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

Dave Gash

Meggin Kearney

Rob Dodson

إنّ العمل مع العناصر الأصلية هو طريقة رائعة للتعرّف على سلوك التركيز، لأنّه يتم إدراجها تلقائيًا في ترتيب علامات التبويب استنادًا إلى موقعها في نموذج 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) ليكونوا في ترتيب منطقي.