استخدام Tabindex

Dave Gash

Meggin Kearney

Rob Dodson

Alexandra Klepper

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

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

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

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

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

وينطبق ذلك تحديدًا على العناصر غير المُدخَلة، مثل العناوين أو الصور أو عناوين المقالات. عند الإمكان، من الأفضل ترتيب الرمز المصدر بحيث يوفّر تسلسل 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 Authoring Practices. يحتوي القسم 2 على قائمة بأنماط التصميم، بما في ذلك جدول الخصائص الخاص بمجموعات أزرار الاختيار، والمكوّن الحالي الذي يتطابق بشكل كبير مع العنصر الجديد.

من السلوكيات الشائعة للوحة المفاتيح التي يجب أن تكون متوافقة معها مفاتيح الأسهم المتّجهة للأعلى/للأسفل/لليسار/لليمين. لإضافة هذا السلوك إلى المكوّن الجديد، نستخدم أسلوبًا يُعرف باسم roving tabindex.

تعمل ميزة roving 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>

عندما يصل المستخدم إلى العنصر الفرعي الأخير (أو الأول، حسب اتجاه تحريك التركيز)، يعود التركيز إلى العنصر الفرعي الأول (أو الأخير).

جرِّب المثال التالي. افحص العنصر في "أدوات المطوّرين" لمراقبة انتقال tabindex من زر اختيار إلى آخر.

النوافذ المنبثقة ومشاكل لوحة المفاتيح

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

ينص القسم 2.1.2 من إرشادات WCAG على أنّه يجب ألا يتم حظر تركيز لوحة المفاتيح أو حصره في عنصر صفحة معيّن. يجب أن يتمكّن المستخدم من الانتقال إلى جميع عناصر الصفحة ومنها باستخدام لوحة المفاتيح فقط.

ويُستثنى من هذه القاعدة النوافذ المنبثقة. ومع ذلك، يجب تجنُّب استخدام tabindex عند إنشاء نافذة مشروطة. باستخدام inert، يمكنك التأكّد من أنّ المستخدمين لا يمكنهم التفاعل مع عنصر عن طريق الخطأ (وهو ما يُعرف باسم "مصيدة لوحة المفاتيح" المتعمدة). استخدِم عنصر <dialog> الذي يكون غير نشط تلقائيًا لإنشاء نافذة مشروطة للمستخدمين مع حظر النقرات وعلامات التبويب خارج النافذة المشروطة. يسمح ذلك للمستخدم بالتركيز على اختيار مطلوب.