استخدام Tabindex

Dave Gash

Meggin Kearney

Rob Dodson

Alexandra Klepper

يكون ترتيب التنقل بـ 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 من أدنى قيمة أكبر من صفر وتعمل في طريقها.

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

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

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

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

الإطارات الشبكية وأزرار لوحة المفاتيح

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

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

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