التحكم في التركيز باستخدام Tabindex

روب دودسون

تكون عناصر HTML العادية، مثل <button> أو <input>، مضمّنة مجانًا في إمكانية الوصول إلى لوحة المفاتيح. مع ذلك، إذا كنت تنشئ مكوِّنات تفاعلية مخصّصة، استخدِم السمة tabindex لضمان إمكانية الوصول إليها من خلال لوحة المفاتيح.

التحقّق مما إذا كان يمكن الوصول إلى عناصر التحكّم من خلال لوحة المفاتيح

تُعد أداة مثل Lighthouse رائعة في اكتشاف بعض مشكلات إمكانية الوصول، ولكن لا يمكن اختبار بعض الأشياء إلا من قبل شخص.

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

إدراج عنصر في ترتيب التنقل بـ Tab

أدخِل عنصرًا في ترتيب التنقل بـ Tab الطبيعي باستخدام tabindex="0". مثال:

<div tabindex="0">Focus me with the TAB key</div>

للتركيز على عنصر، اضغط على مفتاح Tab أو استدعِ طريقة focus() للعنصر.

إزالة عنصر من ترتيب التنقل بـ Tab

إزالة عنصر باستخدام السمة tabindex="-1" مثال:

<button tabindex="-1">Can't reach me with the TAB key!</button>

يؤدي هذا الإجراء إلى إزالة العنصر من ترتيب علامات التبويب الطبيعي، ولكن يمكن التركيز على العنصر من خلال استدعاء طريقة focus().

تجدر الإشارة إلى أنّ تطبيق tabindex="-1" على عنصر لا يؤثر في عناصره الثانوية، وإذا كانت مرتبطة بترتيب مفتاح التبويب (Tab) بشكل طبيعي أو بسبب قيمة tabindex، فستبقى بترتيب مفتاح التبويب (Tab). لإزالة عنصر وجميع العناصر الثانوية الخاصة به من ترتيب التنقّل باستخدام مفتاح التبويب (Tab)، يمكنك استخدام رمز polyfill inert الخاص بـ WICG. يحاكي رمز polyfill سلوك سمة inert المقترَحة، ما يمنع اختيار العناصر أو قراءتها بواسطة التكنولوجيا المساعِدة.

تجنُّب tabindex > 0

يؤدي استخدام أي قيمة tabindex أكبر من 0 إلى نقل العنصر إلى مقدّمة ترتيب علامات التبويب الطبيعي. إذا كان هناك عناصر متعددة بقيمة tabindex أكبر من 0، يبدأ ترتيب علامات الجدولة من أدنى قيمة أكبر من صفر ويتحوّل إلى أعلى.

إنّ استخدام قيمة tabindex أكبر من 0 يُعتبر معارضًا للنمط لأنّ برامج قراءة الشاشة تتنقّل في الصفحة بترتيب DOM، وليس حسب ترتيب التنقل بـ Tab. إذا كنت بحاجة إلى ظهور عنصر في وقت أقرب في ترتيب التنقل بـ Tab، فيجب نقله إلى مكان سابق في DOM.

تسهِّل أداة Lighthouse تحديد العناصر باستخدام tabindex > 0. شغِّل تدقيق إمكانية الوصول (Lighthouse > الخيارات > إمكانية الوصول) وابحث عن نتائج التدقيق "لا يحتوي أي عنصر على قيمة [tabindex] أكبر من 0".

إنشاء مكونات يسهل الوصول إليها باستخدام ميزة "التنقل tabindex"

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

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

عند حدوث ذلك، يضبط المكوِّن القيمة 0-1 للسمة الفرعية التي تمّ التركيز عليها سابقًا، ويضبط tabindex الخاص بالطفل الذي سيتم التركيز عليه على 0، ويطلب الطريقة focus() عليه.tabindex

قبل

<div role="toolbar">
  <button tabindex="-1">Undo</button>
  <button tabindex="0">Redo</button>
  <button tabindex="-1">Cut</button>
</div>

بعد

<div role="toolbar">
  <button tabindex="-1">Undo</button>
  <button tabindex="-1">Redo</button>
  <button tabindex="0">Cut</button>
</div>

قائمة المهام: DevSite - تقييم التفكير والتحقّق

وصفات الوصول إلى لوحة المفاتيح

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