تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

استخدام 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>

عندما يصل المستخدِم إلى العنصر الثانوي الأخير (أو الأول، استنادًا إلى الاتجاه الذي ينقل فيه التركيز)، يعود التركيز إلى العنصر الثانوي الأول (أو الأخير).

جرِّب المثال التالي. تحقّق من العنصر في DevTools لمراقبة فهرس علامات التبويب أثناء انتقاله من زر راديو إلى آخر.

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

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

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

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