أهمية ترتيب DOM التلقائي
يعد استخدام العناصر الأصلية طريقة رائعة للتعرّف على سلوك التركيز لأنه يتم إدراجها تلقائيًا في ترتيب التنقل بـ 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. وقد يتسبب ذلك في تغيير ترتيب التنقل بـ Tab، على ما يبدو عشوائيًا، وإرباك المستخدمين الذين يعتمدون على لوحة المفاتيح. لهذا السبب، تنص قائمة تحقق AIM على الويب في القسم 1.3.2 على أن ترتيب القراءة والتنقل، على النحو المحدد حسب ترتيب الرمز، يجب أن يكون منطقيًا وبديهيًا.
كقاعدة، حاول التنقل في صفحاتك من حين لآخر للتأكد من عدم فوضى ترتيب التنقل بـ Tab. إنها عادة جيدة يجب اعتمادها ولا تتطلب الكثير من الجهد.
محتوى خارج الشاشة
ماذا لو كان لديك محتوى غير معروض حاليًا ولكنه لا يزال بحاجة إلى التواجد في DOM، مثل التنقل الجانبي سريع الاستجابة؟ عندما يكون هناك عناصر كهذه يتم التركيز عليها عندما تكون خارج الشاشة، قد يبدو وكأن التركيز يختفي ثم يعاود الظهور أثناء علامات تبويب المستخدم خلال الصفحة، ومن الواضح أنّ هذا التأثير غير مرغوب فيه. من الناحية المثالية، يجب أن نمنع اللوحة من اكتساب التركيز عندما تكون خارج الشاشة، والسماح لها بالتركيز فقط عندما يتمكن المستخدم من التفاعل معها.
في بعض الأحيان تحتاج إلى القيام ببعض الأعمال الاستقصائية لمعرفة
ما ذهب إليه التركيز. يمكنك استخدام document.activeElement من وحدة التحكم لمعرفة العنصر الذي يتم التركيز عليه حاليًا.
بعد معرفة العنصر الذي يتم التركيز عليه خارج الشاشة، يمكنك ضبطه على
display: none أو visibility: hidden، ثم إعادة ضبطه على display:
block أو visibility: visible قبل عرضه للمستخدم.
وبشكل عام، ننصح المطوّرين بالتبديل إلى مواقعهم الإلكترونية قبل كل عملية نشر للتأكّد من أنّ ترتيب التنقّل باستخدام مفتاح التبويب (Tab) لا يختفي أو يخرج عن أي تسلسل منطقي. إذا كان الأمر كذلك، عليك التأكّد من إخفاء المحتوى بشكلٍ مناسب خارج الشاشة باستخدام display: none أو visibility: hidden، أو إعادة ترتيب المواضع الفعلية للعناصر في نموذج العناصر في المستند (DOM) بحيث تكون بترتيب منطقي.