تحدد ميزة "نقطة بداية التنقل بالتركيز التسلسلي" المكان الذي نبدأ فيه في البحث عن العناصر التي يمكن التركيز عليها للتنقل عبر التركيز التسلسلي ([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.
رائع أن هذا بالضبط ما أردناه، والأفضل من ذلك، أننا لم نضطر إلى تغيير تعليماتنا البرمجية. اكتشف المتصفح للتو أين يجب أن يذهب التركيز بناءً على المكان الذي كنا فيه في المستند.
How does it work?
قبل تنفيذ نقطة بداية التركيز، سينتقل التركيز دائمًا من العنصر السابق محل التركيز، أو من أعلى الصفحة. هذا يعني أن اختيار ما سيتم التركيز عليه بعد ذلك يمكن أن يتضمن نقل التركيز إلى شيء لا ينبغي التركيز عليه حقًا، مثل عنصر حاوية أو عنوان. وهذا يسبب كل أنواع العناصر الغريبة، بما في ذلك عرض حلقة تركيز إذا حدث ذلك أثناء النقر على هذا العنصر بدون قلق.
إنّ نقطة البداية التي يمكن التركيز عليها، كما يوحي الاسم، توفّر آلية لاقتراح مكان بدء البحث عن العنصر التالي القابل للتركيز عند الضغط على Tab أو Shift-Tab.
يمكن تعيينها بعدة طرق:
إذا كان هناك شيء يتم التركيز عليه، فهو أيضًا نقطة بداية التنقل التركيز، تمامًا كما كان من قبل.
وكما في السابق، إذا لم يتم ضبط نقطة بداية التنقّل للتركيز، ستكون document الحالية أو dialog النشطة حاليًا، في حال توفّرها وإتاحتها.
إذا انتقلنا إلى جزء من الصفحة كما في المثال أعلاه، فسيتم الآن تعيين نقطة بداية التركيز.
وأيضًا، إذا نقرنا على أي عنصر في الصفحة، بغض النظر عما إذا كان قابلاً للتركيز أم لا، سيؤدي ذلك الآن إلى تعيين نقطة بداية التنقل في التركيز.
وأخيرًا، إذا تمت إزالة العنصر الذي كان نقطة بداية التركيز من عنصر DOM، يصبح العنصر الرئيسي نقطة بداية التركيز. لا داعي للقلق بعد الآن.
حالات الاستخدام الأخرى
بخلاف المثال أعلاه، هناك العديد من السيناريوهات الأخرى التي يمكن أن تكون فيها هذه الميزة مفيدة.
إخفاء العناصر
في بعض الأحيان، قد يركز المستخدم على عنصر يجب ضبطه على visibility: hidden أو display: none. من أمثلة ذلك العناصر القابلة للنقر داخل العرض الدوار. في الإصدارات السابقة من Chrome، كان إخفاء العنصر المركّز عليه حاليًا بهذه الطريقة يؤدي إلى إعادة ضبط التركيز إلى نقطة البداية التلقائية، ما يؤدي إلى تحويل لوحة العرض الدوّارة المذكورة أعلاه إلى فخ سيئ للمستخدمين الذين يعانون من عجز في الحركة. مع نقطة بداية التركيز التسلسلي، لم يعد هذا هو الحال. إذا كان عنصر مخفيًا من خلال أي من الطريقتين السابقتين، سيؤدي الضغط على المفتاح Tab إلى الانتقال ببساطة إلى العنصر التالي القابل للتركيز.
تخطّي الروابط
روابط التخطي هي علامات ارتساء غير مرئية لا يمكن الوصول إليها إلا من خلال لوحة المفاتيح. وهي تتيح للمستخدمين "تخطي" عناصر التنقل من أجل الانتقال مباشرةً إلى محتوى الصفحة ويمكن أن تكون مفيدة للغاية لمستخدمي لوحة المفاتيح وتبديل الأجهزة. كما هو موضح على موقع WebAIM الإلكتروني
يستخدم العديد من المواقع الإلكترونية الرائجة روابط التخطّي، ولكنّك ربما لم تلاحظها من قبل.
ونظرًا لأن روابط التخطي تُسمَّى علامات الارتساء، فإنها تعمل بنفس طريقة عمل مثال جدول المحتويات الأصلي.
المحاذير والدعم
لا تتوفّر حاليًا نقطة بدء التنقل المحوري التسلسلي إلا في Chrome 50 وFirefox وOpera. وإلى أن تتم إتاحة هذه السمة في جميع المتصفحات، ستظل بحاجة إلى إضافة tabindex="-1" (وإزالة مخطط التركيز) إلى استهدافات الإعلانات الثابتة المسماة.
عرض توضيحي
إنّ نقطة بداية التنقل التسلسلي المرتكز على التركيز هي إضافة رائعة إلى مجموعة "أساسيات تسهيل الاستخدام" في المتصفّح. من السهل أن ننتهي من ذلك، ويتيح لنا في الواقع إزالة الرمز من تطبيقنا مع تحسين تجربة المستخدمين. بهذه الطريقة، تستفيد كل الأطراف من هذا الحدث. يُرجى الاطّلاع على العرض التوضيحي لاستكشاف هذه الميزة بمزيد من التفاصيل.