التحكم في التركيز باستخدام Tabindex

Rob Dodson

Alexandra Klepper

تتضمّن عناصر HTML العادية، مثل <button> أو <input>، ميزات اتّصال باللوحة المفاتيح مدمجة، ويجب استخدامها كلما أمكن ذلك. ومع ذلك، إذا كنت بحاجة إلى إنشاء عناصر تفاعلية مخصصة، يمكنك إنشاء سلوك المستخدم المتوقع من خلال بِيْتِمّْ إِضَافِةْ tabindex.

لا تضِف tabindex إلا إلى المحتوى التفاعلي. حتى إذا كان المحتوى مهمًا، مثل صورة مفتاح، يمكن لمستخدمي برامج قراءة الشاشة فهمه بدون إضافة تركيز.

ما هو عنصر tabindex؟

إذا كنت بحاجة إلى تعديل ترتيب علامات التبويب التلقائي المقدَّم من العناصر المضمّنة، يمكنك استخدام سمة HTML tabindex لضبط موضع علامة التبويب في العنصر بشكل صريح.

يمكن تطبيق tabindex على أي عنصر، إلا أنّه يجب تطبيقه فقط على العناصر التفاعلية، ويقبل نطاقًا من القيم الصحيحة. مع tabindex، يمكنك تحديد ترتيب صريح لعناصر الصفحة التي يمكن التركيز عليها، إدراج عنصر لا يمكن التركيز عليه بخلاف ذلك في ترتيب التنقل بـ Tab، وإزالة العناصر من ترتيب التنقل بـ Tab. على سبيل المثال:

‫tabindex="0": لإدراج عنصر في ترتيب علامات التبويب الطبيعي يمكن للعنصر التركيز من خلال الضغط على Tab، ويمكن التركيز على العنصر من خلال استدعاء طريقة focus().

‫tabindex="-1": تزيل عنصرًا من ترتيب علامات التبويب الطبيعي، ولكن يمكن التركيز على العنصر باستدعاء طريقة focus()

tabindex="5": أي عنصر Tabindex أكبر من 0 ينقل هذا العنصر إلى المقدّمة. بترتيب التنقل الطبيعي. إذا كانت هناك عناصر متعددة لها قيمة tabindex أكبر من 0، يبدأ ترتيب علامات التبويب من القيمة الأدنى التي تزيد عن الصفر وينتقل للأعلى. يُعدّ استخدام فهرس علامة التبويب أكبر من 0 أحد الممارسات غير المُقترَحة.

التأكد من إمكانية الوصول إلى عناصر التحكم من خلال لوحة المفاتيح

تُعد أداة مثل Lighthouse رائعة في الكشف التلقائي عن بعض مشكلات الوصول ومع ذلك، لا يزال يتعين على الشخص إجراء بعض الاختبارات يدويًا.

جرِّب الضغط على مفتاح Tab للتنقّل في موقعك الإلكتروني. هل يمكنك الوصول إلى جميع عناصر التحكّم التفاعلية على الصفحة؟ إذا لم يكن الأمر كذلك، قد تحتاج إلى استخدام tabindex لتحسين إمكانية التركيز على عناصر التحكّم هذه.

إدارة التركيز على مستوى الصفحة

في بعض الأحيان، يساعد tabindex في توفير تجربة سلسة للمستخدمين. على سبيل المثال: إذا أنشأت صفحة واحدة قوية تضم أقسامًا مختلفة للمحتوى، حيث تتضمن بعض يكون المحتوى مخفيًا في نقاط مختلفة أثناء تحميل الصفحة. وقد يعني ذلك تغيّر روابط التنقّل المحتوى المرئي بدون إعادة تحميل الصفحة.

في هذه الحالة، عليك تحديد منطقة المحتوى المحدّدة ومنحها tabindex -1 واستدعاء طريقة focus. يضمن ذلك عدم ظهور المحتوى في ترتيب علامات التبويب الطبيعي. وهذه التقنية، التي تُسمى إدارة التركيز، تحافظ على السياق المتصور للمستخدم بالتزامن مع المحتوى المرئي للموقع.

إدارة التركيز في المكوّنات

في بعض الحالات، عليك أيضًا إدارة التركيز على مستوى التحكّم، مثل استخدام العناصر المخصّصة.

قد يكون من الصعب معرفة سلوكيات لوحة المفاتيح التي يجب تنفيذها. تشير رسالة الأشكال البيانية كتابة تطبيقات الإنترنت الغنية بصريًا (ARIA) الممارسات أنواع المكونات وأنواع إجراءات لوحة المفاتيح التي تدعمها.

إدراج عنصر في ترتيب التبويب

أدخِل عنصرًا في ترتيب علامات التبويب الطبيعي باستخدام tabindex="0". على سبيل المثال:

<div tabindex="0">Focus me with the TAB key</div>

للتركيز على عنصر، اضغط على مفتاح Tab أو اطلب طريقة focus() للعنصر.

إزالة عنصر من ترتيب علامات التبويب

أزِل عنصرًا باستخدام tabindex="-1". على سبيل المثال:

<button tabindex="-1">Can't reach me with the TAB key!</button>

يؤدي ذلك إلى إزالة عنصر من ترتيب علامات التبويب الطبيعي، ولكن سيظل بإمكانك التركيز على العنصر من خلال استدعاء الطريقة focus().

لا يؤثّر تطبيق tabindex="-1" على العنصر في عناصره الفرعية، فإذا كانت في ترتيب علامات التبويب بشكل طبيعي أو بسبب قيمة tabindex، ستبقى في ترتيب علامات التبويب. لإزالة عنصر وكل عناصره الثانوية من ترتيب التنقل بـ Tab، يمكنك استخدام رموز polyfill inert الخاصة بـ WICG. تحاكي تقنية polyfill سلوك سمة inert المقترَحة، التي تمنع التكنولوجيات المساعِدة من اختيار العناصر أو قراءتها.

تجنب tabindex > 0

يؤدي أيّ tabindex أكبر من 0 إلى نقل العنصر إلى مقدمة الترتيب الطبيعي للتنقّل باستخدام tabulator. إذا كانت هناك عناصر متعددة لها قيمة tabindex أكبر من 0، يبدأ ترتيب علامات التبويب من القيمة الأدنى التي تزيد عن الصفر ويصعد للأعلى.

يُعتبر استخدام قيمة أكبر من 0 tabindex نمطًا مضادًا للأسباب التالية: برامج قراءة الشاشة التنقل في الصفحة بترتيب DOM، وليس ترتيب التنقل بـ Tab. إذا كنت بحاجة إلى أن يظهر عنصر في وقت أبكر من ترتيب علامات التبويب، يجب نقله إلى موضع سابق في نموذج DOM.

باستخدام Lighthouse، يمكنك التعرّف على العناصر باستخدام tabindex > 0. تشغيل تدقيق إمكانية الوصول (Lighthouse > الخيارات > إمكانية الوصول) والبحث عن نتائج "لا يحتوي أي عنصر على قيمة [tabindex] أكبر من 0" التدقيق.

استخدام "tabindex المتنقلة"

إذا كنت تقوم بإنشاء مكون معقد، فقد تحتاج إلى إضافة لوحة مفاتيح إضافية والدعم خارج نطاق التركيز. استخدِم عنصر select المضمّن إذا أمكن. ويمكن تركيزه، كما تتيح مفاتيح الأسهم عرض خيارات إضافية قابلة للاختيار.

لتنفيذ وظائف مشابهة في مكوّناتك، يمكنك استخدام أسلوب يُعرف باسم "tabindex المتنقل". يعمل tabindex المتنقل من خلال ضبط tabindex على -1 لكل العناصر الفرعية باستثناء العنصر النشط حاليًا. بعد ذلك، يستخدم المكوّن مستمعًا لأحداث لوحة المفاتيح لتحديد المفتاح الذي ضغط عليه المستخدم.

عند حدوث ذلك، يضبط المكوِّن الإعداد tabindex التابع للطفل الذي تم التركيز عليه سابقًا على -1، وضبط tabindex للطفل الذي يتم التركيز عليه على 0، واستدعاء focus() في كل مرة.

قبل

<div role="toolbar">
  <button tabindex="-1">Undo</button>
  <button tabindex="0">Redo</button>
  <button tabindex="-1">Cut</button>
</div>

بعد

<div role="toolbar">
  <button tabindex="-1">Undo</button>
  <button tabindex="-1">Redo</button>
  <button tabindex="0">Cut</button>
</div>

وصفات الوصول إلى لوحة المفاتيح

إذا لم تكن متأكدًا من مستوى دعم لوحة المفاتيح الذي قد يتوافق مع مكوناتك المخصصة التي تحتاجها، يمكنك الرجوع إلى الإصدار 1.1 من ممارسات التأليف في ARIA يسرد هذا الدليل أنماط واجهة المستخدم الشائعة ويحدّد المفاتيح التي يجب أن تتوافق معها المكونات.