إنّ ترتيب التنقل بـ Tab الافتراضي الذي يوفره موضع DOM لعناصر HTML الدلالية هو أمر مريح، ولكن قد تحتاج في بعض الأحيان إلى تعديل ترتيب التنقل بـ Tab. يعد نقل العناصر في HTML مثاليًا، لكن قد لا يكون ممكنًا. في هذه الحالات، يمكنك استخدام سمة HTML tabindex لضبط موضع علامة تبويب أحد العناصر بشكل صريح.
يمكن تطبيق tabindex على أي عنصر، على الرغم من أنه ليس بالضرورة
مفيدًا مع كل عنصر، إذ يأخذ نطاقًا من قيم الأعداد الصحيحة. باستخدام tabindex، يمكنك تحديد ترتيب صريح لعناصر الصفحة القابلة للتركيز، وإدراج عنصر لا يمكن التركيز عليه في ترتيب التنقل بـ Tab وإزالة العناصر من ترتيب التنقل بـ Tab. مثلاً:
tabindex="0": يدرج عنصرًا في ترتيب التنقل بـ Tab العادي. ويمكن التركيز على العنصر بالضغط على Tab، ويمكن التركيز على العنصر من خلال استدعاء طريقة focus().
tabindex="-1": يزيل عنصرًا من ترتيب التنقل العادي، ولكن يمكن أن يظل التركيز على العنصر عن طريق استدعاء طريقة focus()
tabindex="5": أي عنصر Tabindex أكبر من 0 يضع هذا العنصر في مقدمة ترتيب التنقل الطبيعي. إذا كان هناك عدة عناصر تحتوي على فهرس Tab أكبر من 0، يبدأ ترتيب التنقل بـ Tab من أدنى قيمة أكبر من صفر ويسير في طريقه لأعلى. ويُعدّ استخدام Tabindex أكبر من 0
نمطًا مضادًا.
هذا ينطبق بشكل خاص على العناصر التي لا تحتوي على إدخالات مثل العناوين أو الصور أو عناوين المقالات. ومن الأفضل ترتيب رمز المصدر عندما يكون ذلك ممكنًا حتى يوفّر تسلسل DOM ترتيبًا منطقيًا لعلامات التبويب. إذا كنت تستخدم tabindex، احصره بعناصر تحكُّم تفاعلية مخصصة مثل الأزرار وعلامات التبويب والقوائم المنسدلة والحقول النصية، أي العناصر التي قد يتوقع المستخدم إدخال البيانات إليها.
لا تضِف tabindex إلا إلى المحتوى التفاعلي. حتى إذا كان المحتوى مهمًا، مثل صورة رئيسية، يمكن لمستخدمي برامج قراءة الشاشة فهمه بدون إضافة تركيز.
إدارة التركيز على مستوى الصفحة
في بعض الأحيان، يكون tabindex ضروريًا لتوفير تجربة سلسة للمستخدم. على سبيل المثال، إذا أنشأت صفحة واحدة فعّالة تضمّ أقسامًا مختلفة للمحتوى، بحيث لا يكون كل المحتوى مرئيًا في الوقت نفسه. قد يعني ذلك أن روابط التنقل تغير
المحتوى المرئي، بدون تحديث الصفحة.
في هذه الحالة، حدد منطقة المحتوى المحددة وامنحها tabindex من -1 واستدعي طريقة focus الخاصة بها. يضمن ذلك عدم ظهور المحتوى بترتيب
علامات التبويب الطبيعية. يُطلَق على هذه التقنية إدارة التركيز، وهي تحافظ على تزامن المحتوى المرئي للمستخدم مع المحتوى المرئي على الموقع الإلكتروني.
إدارة التركيز في المكوّنات
في بعض الحالات، عليك أيضًا إدارة التركيز على مستوى التحكّم، مثل إدارة المكوّنات المخصّصة.
على سبيل المثال، يمكن أن يتلقّى العنصر select التركيز الأساسي، ولكن بعد ذلك،
يمكنك استخدام مفاتيح الأسهم لعرض خيارات إضافية قابلة للاختيار.
عند إنشاء عنصر select مخصّص، من المهم تكرار هذا السلوك، كي يظل بإمكان مستخدمي لوحة المفاتيح التفاعل مع عناصر التحكّم.
قد يكون من الصعب معرفة سلوكيات لوحة المفاتيح التي يجب تنفيذها. يسرد دليل ممارسات التأليف في "تطبيقات الإنترنت التفاعلية المتقدّمة" (ARIA) أنواع المكوّنات وأنواع إجراءات لوحة المفاتيح التي توفّرها.
ربما تعمل على عناصر مخصصة تشبه مجموعة من أزرار الاختيار، ولكنها تضفي طابعًا فريدًا على مظهرك وسلوكك.
<radio-group>
<radio-button>Water</radio-button>
<radio-button>Coffee</radio-button>
<radio-button>Tea</radio-button>
<radio-button>Cola</radio-button>
<radio-button>Ginger Ale</radio-button>
</radio-group>
لتحديد دعم لوحة المفاتيح الذي يحتاجون إليه، يمكنك الاطّلاع على دليل ممارسات التأليف في ARIA. يحتوي القسم الثاني على قائمة بأنماط التصميم، بما في ذلك جدول الخصائص للمجموعات اللاسلكية، وهو المكوّن الحالي الأكثر تطابقًا مع العنصر الجديد.
أحد سلوكيات لوحة المفاتيح الشائعة التي ينبغي دعمها هي مفاتيح الأسهم لأعلى/لأسفل/لليسار/لليمين. ولإضافة هذا السلوك إلى المكون الجديد، نستخدم أسلوبًا يسمى تجوال Tabindex.
يعمل Tabindex المتنقل من خلال ضبط tabindex على -1 لجميع الأطفال باستثناء
العنصر النشط حاليًا.
<radio-group>
<radio-button tabindex="0">Water</radio-button>
<radio-button tabindex="-1">Coffee</radio-button>
<radio-button tabindex="-1">Tea</radio-button>
<radio-button tabindex="-1">Cola</radio-button>
<radio-button tabindex="-1">Ginger Ale</radio-button>
</radio-group>
يستخدم المكوّن أداة معالجة أحداث لوحة المفاتيح لتحديد المفتاح الذي يضغط عليه المستخدم. وعندما يحدث ذلك، يضبط tabindex الخاص بالطفل الذي تم التركيز عليه سابقًا على -1، ويضبط tabindex للطفل الذي يتم التركيز عليه على 0، ثم يتم استدعاء طريقة التركيز.
<radio-group>
<!-- Assuming the user pressed the down arrow, we'll focus the next available child -->
<radio-button tabindex="-1">Water</radio-button>
<radio-button tabindex="0">Coffee</radio-button> // call .focus() on this element
<radio-button tabindex="-1">Tea</radio-button>
<radio-button tabindex="-1">Cola</radio-button>
<radio-button tabindex="-1">Ginger Ale</radio-button>
</radio-group>
عندما يصل المستخدم إلى آخر طفل (أو أول، اعتمادًا على الاتجاه الذي يتنقل فيه التركيز)، يتم تركيز الحلقات مرة أخرى على العنصر الثانوي الأول (أو الأخير).
جرِّب المثال التالي. افحص العنصر في أدوات مطوري البرامج لملاحظة انتقال فهرسة علامة التبويب من راديو إلى آخر.
الإطارات الشبكية وأزرار لوحة المفاتيح
من الأفضل تجنب إدارة التركيز يدويًا، لأنه قد يؤدي إلى مواقف معقدة. على سبيل المثال، يشير هذا المصطلح إلى تطبيق مصغّر للإكمال التلقائي يحاول إدارة التركيز وتسجيل سلوك علامة التبويب، ولكنه يمنع المستخدم من مغادرته إلى أن تكتمل العملية. وهذا ما يسمى فخ لوحة المفاتيح، وقد يكون محبطًا للغاية للمستخدم.
ينص القسم 2.1.2 من إرشادات إتاحة محتوى الويب WCAG على أنّه يجب عدم قفل تركيز لوحة المفاتيح أو التركيز عليه أبدًا عند عنصر صفحة معيّن. ويجب أن يكون المستخدم قادرًا على الانتقال من وإلى جميع عناصر الصفحة باستخدام لوحة المفاتيح فقط.
استثناء هذه القاعدة هو النوافذ المشروطة. مع ذلك، يجب تجنُّب استخدام
tabindex عند إنشاء نموذج. باستخدام inert، يمكنك ضمان عدم تمكّن المستخدمين من التفاعل عن طريق الخطأ مع أي عنصر (أداة فخ لوحة مفاتيح مقصودة). استخدِم عنصر <dialog>، الذي يكون غير نشط تلقائيًا، لإنشاء نموذج للمستخدمين أثناء حظر النقرات وعلامات التبويب خارج النافذة. يسمح هذا للمستخدم بالتركيز
على تحديد مطلوب.