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

Rob Dodson

Alexandra Klepper

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

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

ما هو عنصر tabindex؟

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

أدخِل عنصرًا في ترتيب علامات التبويب الطبيعي باستخدام 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 إلى نقل العنصر إلى مقدمة الترتيب الطبيعي للتنقّل باستخدام tabulator. إذا كانت هناك عناصر متعددة لها قيمة tabindex أكبر من 0، يبدأ ترتيب علامات التبويب من القيمة الأدنى التي تزيد عن الصفر ويصعد للأعلى.

يُعدّ استخدام قيمة 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 1.1. يسرد هذا الدليل أنماط واجهة المستخدم الشائعة ويحدّد المفاتيح التي يجب أن تتوافق معها المكونات.