أهمية ترتيب DOM التلقائي
ويُعدّ العمل باستخدام العناصر الأصلية طريقة رائعة للتعرّف على سلوك التركيز لأنّه يتم إدراجها تلقائيًا في ترتيب التنقل بـ 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، مثل التنقل الجانبي سريع الاستجابة؟ عندما يكون لديك عناصر مثل هذه تحظى بالتركيز عندما تكون خارج الشاشة، فقد يبدو كما لو أن التركيز يختفي ويظهر مرة أخرى كعلامات تبويب للمستخدم عبر الصفحة - من الواضح أن هذا تأثير غير مرغوب فيه. من الناحية المثالية، يجب أن نمنع اللوحة من التركيز عندما تكون خارج الشاشة، وألا نسمح للتركيز عليها إلا عندما يتمكن المستخدم من التفاعل معها.
![يمكن أن تؤدي اللوحة القابلة للانزلاق خارج الشاشة إلى سرقة التركيز.](https://web.dev/static/articles/dom-order-matters/image/an-offscreen-slide-panel-418516732500b.png?authuser=6&hl=ar)
تحتاج أحيانًا إلى القيام ببعض الأعمال الاستقصائية لمعرفة أين ذهب
التركيز. يمكنك استخدام document.activeElement
من وحدة التحكّم لمعرفة العنصر الذي يتم التركيز عليه حاليًا.
وبعد معرفة العنصر الذي يتم التركيز عليه خارج الشاشة، يمكنك ضبطه على
display: none
أو visibility: hidden
، ثم إعادة ضبطه على display:
block
أو visibility: visible
قبل عرضه للمستخدم.
![لوحة منزلق مضبوطة على عرض "بدون".](https://web.dev/static/articles/dom-order-matters/image/a-slide-panel-set-displ-4e959c65a9e47.png?authuser=6&hl=ar)
![لوحة منزلق مضبوطة على عرض كتلة](https://web.dev/static/articles/dom-order-matters/image/a-slide-panel-set-displ-ccba12904336f.png?authuser=6&hl=ar)
ننصح المطوّرين بشكل عام بتصفُّح مواقعهم الإلكترونية قبل كل عملية نشر لمعرفة أنّ ترتيب التنقل بـ Tab لا يختفي أو يخرج من تسلسل منطقي. إذا حدث ذلك، عليك التأكّد من إخفاء المحتوى خارج الشاشة بشكل مناسب باستخدام display: none
أو visibility: hidden
، أو إعادة ترتيب المواضع المادية للعناصر في نموذج العناصر في المستند (DOM) بحيث تكون بترتيب منطقي.