استخدام Tabindex

Dave Gash

Meggin Kearney

Rob Dodson

Alexandra Klepper

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ربما تكون بصدد إنشاء عناصر مخصّصة تشبه مجموعة من الأزرار الاختيارية، ولكن بلمستك الفريدة من حيث المظهر والسلوك.

<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 . يحتوي القسم 2 على قائمة بأنماط التصميم، بما في ذلك جدول الخصائص لمجموعات buttons radio ، المكوّن الحالي الأقرب إلى العنصر الجديد.

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

يعمل فهرس علامات التبويب المتنقل من خلال ضبط 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، ويُطلِق عليه طريقة focus.

<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> الذي يكون غير نشط تلقائيًا لإنشاء نافذة منبثقة للمستخدمين مع حظر النقرات وعلامات التبويب خارج النافذة المنبثقة. يتيح ذلك للمستخدم التركيز على أحد الخيارات المطلوبة.