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

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

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

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

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

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

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