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

Rob Dodson

Alexandra Klepper

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

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

ما هي السمة tabindex؟

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

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

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

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

tabindex="5": أي قيمة tabindex أكبر من 0 تنقل هذا العنصر إلى مقدّمة ترتيب التنقل الطبيعي باستخدام مفتاح Tab. إذا كانت هناك عناصر متعددة تتضمّن قيمة tabindex أكبر من 0، يبدأ ترتيب الانتقال باستخدام المفتاح Tab من القيمة الأصغر التي تكون أكبر من صفر، ثم ينتقل إلى القيم الأكبر. يُعدّ استخدام قيمة tabindex أكبر من 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، ستبقى في ترتيب علامات التبويب. لإزالة عنصر وجميع العناصر الفرعية التابعة له من ترتيب علامات التبويب، ننصحك باستخدام inert polyfill من WICG. يحاكي رمز polyfill سلوك السمة inert المقترَحة، التي تمنع التكنولوجيات المساعِدة من اختيار العناصر أو قراءتها.

تجنَّب tabindex > 0

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

يُعدّ استخدام قيمة tabindex أكبر من 0 نمطًا غير مرغوب فيه لأنّ برامج قراءة الشاشة تتنقّل في الصفحة حسب ترتيب DOM، وليس ترتيب علامات التبويب. إذا كنت بحاجة إلى ظهور عنصر في وقت أقرب في ترتيب علامات التبويب، يجب نقله إلى موضع سابق في نموذج المستند (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>

وصفات تسهيل استخدام لوحة المفاتيح

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