المسائل القانونية لترتيب 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 الخاص به. عندما يتنقل المستخدم عبر الصفحة، ستكتسب الأزرار التركيز بترتيب غير بديهي. جرب النقر على مجموعة الرموز أدناه لنقل نقطة بداية التنقّل في التركيز، ثم اضغط على Tab من أجل ونقل التركيز من خلال الأزرار.

<button style="float: right">I Should</button>
<button>Be Focused</button>
<button>Last!</button>

يجب أن التركيز الأخير

كن حذرًا عند تغيير الموضع المرئي للعناصر على الشاشة باستخدام CSS. ويمكن أن يتسبب هذا في تغيير ترتيب علامات التبويب، والذي يبدو عشوائيًا، ومربكًا للمستخدمين الذين يعتمدون على لوحة المفاتيح. لهذا السبب، تنص قائمة تحقق AIM على الويب في الفقرة 1.3.2 أن ترتيب القراءة والتنقل، كما هو محدد حسب ترتيب التعليمات البرمجية، يجب أن يكون منطقية وبديهية.

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

المحتوى خارج الشاشة

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

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

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

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