تحدِّد ميزة "نقطة البداية للتنقّل التسلسلي للتركيز" المكان الذي نبدأ فيه البحث عن العناصر التي يمكن التركيز عليها للتنقّل التسلسلي للتركيز ([Tab] أو [Shift-Tab]) عندما لا تكون هناك منطقة مُركَّز عليها. ويُعدّ هذا الإجراء مفيدًا بشكل خاص لميزات تسهيل الاستخدام، مثل "الربط بصفحات أخرى" وإدارة التركيز في المستند.
يوفّر لنا تنسيق HTML الكثير من الوظائف المضمّنة للتعامل مع التفاعلات مع لوحة المفاتيح، ما يعني أنّه من السهل جدًا كتابة صفحات يمكن استخدامها من خلال لوحة المفاتيح، سواء كان عجزًا حركيًا يمنعنا من استخدام الماوس أو كنا نستخدم لوحة المفاتيح بكفاءة عالية لدرجة أنّ إزالة أيدينا منها تؤدي إلى إهدار مللي ثانية ثمينة.
تدور معالجة لوحة المفاتيح حول التركيز، الذي يحدّد مكان أحداث لوحة المفاتيح في الصفحة. حتى الآن، كان علينا بذل بعض الجهد الإضافي في بعض الحالات لكي تعمل الأمور بشكل جيد لمستخدمي لوحة المفاتيح. تتيح لنا طريقة focus() إدارة التركيز من خلال اختيار عنصر للتركيز عليه استجابةً لفعل المستخدِم. ومع ذلك، تواجه هذه أفضل الممارسات الكثير من المشاكل وتتطلّب بعض عمليات الاختراق الصعبة في JavaScript لتقديم تجربة أساسية.
على الرغم من أنّ هذه الطريقة لن تنتهي تمامًا في أي وقت قريب، إلا أنّها ستكون ضرورية في حالات أقل في الإصدار 50 من Chrome بفضل نقطة بدء التنقّل التسلسلي للتركيز. وبفضل هذا التغيير، ستصبح الصفحات التي تم إنشاؤها بشكل جيد أكثر سهولة في الاستخدام تلقائيًا بدون الحاجة إلى إدارة التركيز اليدوية الإضافية. لنلقِ نظرة على مثال.
رابط داخل صفحة
غالبًا ما ترتبط المواقع الإلكترونية التي تتضمّن الكثير من النصوص ببعضها داخل الصفحة نفسها لمساعدة المستخدمين في الانتقال بسرعة إلى الأقسام المهمة.
<!-- Table of Contents -->
<a href="#recipes">Recipes</a>
<a href="#ingredients">Ingredients</a>
<!-- Recipes Section -->
<h2 id="recipes">Recipes</h1>
<h3>Vegemite Cheesecake</h3>
<p>
Vegemite cheesecake is delicious. We promise.
<a href="cheesecake.html">Read More</a>
</p>
إذا كنت من مستخدمي لوحة المفاتيح (وأحب الأطعمة الأسترالية)، ستكون سلسلة الإجراءات التالية على النحو التالي:
- اضغط على
Tabمرّتين للتركيز على رابط "وصفات". - اضغط على
Enterللانتقال إلى قسم "الوصفات". - اضغط على
Tabمرة أخرى للتركيز على رابط "قراءة المزيد".
لنطّلِع على طريقة استخدام هذه الميزة عمليًا باستخدام الإصدار 49 من Chrome.
حسنًا، يبدو أنّ الأمور لم تسر على النحو المخطَّط، أليس كذلك؟
بدلاً من التركيز على رابط "قراءة المزيد"، أدى الضغط على Tab للمرة الأخيرة إلى نقل التركيز إلى العنصر التالي في جدول المحتويات. ويعود السبب في ذلك إلى أنّ المطوّر لم يضبط tabindex="-1" على العنوان ليصبح قابلاً للتركيز. وبالتالي، لم يؤدّي النقر على العنصر النائب المُسمى #recipes إلى نقل التركيز. هذا خطأ بسيط، ولا يشكّل مشكلة كبيرة إذا كنت تستخدم الماوس. ولكن قد يكون هذا التغيير مهمًا جدًا إذا كنت تستخدم لوحة مفاتيح أو جهازًا مزوّدًا بشاشة لمس. فكِّر في عدد الروابط المتداخلة في صفحة عادية على "ويكيبيديا". سيكون من المزعج الانتقال باستمرار من علامة إلى أخرى من خلال كل هذه العناصر.
لنلقِ نظرة على التجربة نفسها الآن باستخدام الإصدار 50 من Chrome.
رائع، هذا ما أردناه بالضبط، والأفضل من ذلك أنّنا لم نضطر إلى تغيير الرمز البرمجي. لقد رصد المتصفّح للتوّ المكان الذي يجب أن ينتقل إليه التركيز استنادًا إلى مكاننا في المستند.
كيف تعمل هذه الميزة؟
قبل تنفيذ نقطة بدء التركيز، كان يتم دائمًا نقل التركيز من العنصر السابق الذي تم التركيز عليه أو من أعلى الصفحة. وهذا يعني أنّ اختيار العنصر الذي سيتم التركيز عليه بعد ذلك قد يتضمن نقل التركيز إلى عنصر لا يمكن التركيز عليه، مثل عنصر حاوية أو عنوان. ويؤدي ذلك إلى حدوث كل أنواع الأخطاء، بما في ذلك عرض حلقة تركيز إذا نقرت على عنصر كهذا بدون قصد.
توفّر نقطة بدء التركيز، كما يوحي اسمها، آلية لاقتراح مكان بدء البحث عن العنصر التالي الذي يمكن التركيز عليه عند الضغط على Tab أو Shift-Tab.
يمكن ضبطه بعدة طرق:
إذا كان هناك عنصر في وضع التركيز، سيكون أيضًا نقطة بداية التنقّل في التركيز، تمامًا كما كان من قبل.
وكما في السابق، إذا لم يتم ضبط نقطة بداية التنقّل في التركيز على أي عنصر آخر، ستكون النقطة هي document الحالية أو dialog النشطة حاليًا، إذا كانت متاحة ومتوافقة.
إذا انتقلنا إلى جزء من الصفحة كما هو موضّح في المثال أعلاه، سيتم الآن ضبط نقطة بداية التركيز.
بالإضافة إلى ذلك، إذا نقرنا على أي عنصر في الصفحة، بغض النظر عمّا إذا كان يمكن التركيز عليه، سيتم الآن ضبط نقطة بداية التنقّل بالتركيز.
أخيرًا، إذا تمت إزالة العنصر الذي كان نقطة بداية التركيز من نموذج DOM، يصبح العنصر الرئيسي هو نقطة بداية التركيز. لن يعود عليك التركيز على إصلاح المشاكل الصغيرة.
حالات الاستخدام الأخرى
بالإضافة إلى المثال أعلاه، هناك العديد من السيناريوهات الأخرى التي يمكن أن تكون فيها هذه الميزة مفيدة.
إخفاء العناصر
قد تكون هناك أوقات يركز فيها المستخدم على عنصر يجب ضبطه على visibility: hidden أو display: none. ومن الأمثلة على ذلك العناصر التي يمكن النقر عليها ضمن لوحة عرض دوّارة. في الإصدارات السابقة من Chrome، كان إخفاء العنصر الذي يتم التركيز عليه حاليًا بهذه الطريقة يؤدي إلى إعادة التركيز إلى نقطة البداية التلقائية، ما يحوّل لوحة العرض الدوّارة المذكورة أعلاه إلى فخّ خطير للمستخدمين الذين يعانون من عجز في الحركة. لم يعُد هذا الأمر صحيحًا مع ميزة "نقطة بداية التركيز التسلسلي". إذا تم إخفاء عنصر باستخدام أيّ من الطريقتَين أعلاه، سيؤدي الضغط على مفتاح Tab إلى الانتقال إلى العنصر التالي القابل للتركيز.
تخطّي الروابط
روابط التخطّي هي روابط غير مرئية يمكن الوصول إليها من خلال لوحة المفاتيح فقط. وتسمح هذه العناصر للمستخدمين بـ "تخطّي" عناصر التنقّل للانتقال مباشرةً إلى محتوى الصفحة، ويمكن أن تكون مفيدة للغاية لمستخدمي لوحة المفاتيح والأجهزة المزوّدة بزرّ التبديل. كما هو موضّح على موقع WebAIM الإلكتروني
تستخدم العديد من المواقع الإلكترونية الرائجة روابط التخطّي، على الرغم من أنّك ربما لم تلاحظها أبدًا.
بما أنّ روابط التخطّي هي عناصر ربط مُسمّاة، فإنّها تعمل بالطريقة نفسها التي يعمل بها مثال جدول المحتويات الأصلي.
تنبيهات ودعم
لا تتوفّر نقطة البداية لميزة التنقّل التسلسلي للتركيز حاليًا إلا في الإصدار 50 من Chrome وFirefox وOpera. إلى أن يصبح هذا الرمز متوافقًا مع جميع المتصفّحات، سيظل عليك إضافة tabindex="-1" (وإزالة مخطّط التركيز) إلى استهدافات العناصر النائبة المُسمّاة.
عرض توضيحي
إنّ نقطة البدء لتنقّل التركيز التسلسلي هي إضافة رائعة إلى مجموعة المتصفّح من العناصر الأساسية لإمكانية الوصول. من السهل فهمها، وهي تتيح لنا إزالة الرموز البرمجية من تطبيقنا مع تحسين تجربة المستخدمين. فوز مزدوج اطّلِع على العرض التوضيحي لاستكشاف هذه الميزة بشكل مفصّل.