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

Rob Dodson
Alexandra Klepper
Alexandra Klepper
X GitHub LinkedIn

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

دعم المتصفح

  • Chrome: 1-
  • الحافة: 12.
  • Firefox: 1.5.
  • Safari: ≤4

المصدر

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

ما هو Tabindex؟

في المناسبة التي تحتاج إلى تعديل ترتيب علامات التبويب الافتراضي الذي يوفره المضمنة يمكنك استخدام سمة HTML tabindex لإعداد موضع علامة تبويب العنصر.

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

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

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

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

التأكد من إمكانية الوصول إلى عناصر التحكم من خلال لوحة المفاتيح

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

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

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

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

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

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

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

قد يكون من الصعب معرفة سلوكيات لوحة المفاتيح التي يجب تنفيذها. تشير رسالة الأشكال البيانية كتابة تطبيقات الإنترنت الغنية بصريًا (ARIA) الممارسات أنواع المكونات وأنواع إجراءات لوحة المفاتيح التي تدعمها.

إدراج عنصر في ترتيب التنقل بـ 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" على عنصر في عناصره الثانوية. إذا كانت في ترتيب التنقل بشكل طبيعي أو بسبب قيمة tabindex، ستظل في ترتيب التنقل بـ Tab. لإزالة عنصر وكل عناصره الثانوية من ترتيب التنقل بـ Tab، يمكنك استخدام رموز polyfill inert الخاصة بـ WICG. ويحاكي الرمز polyfill سلوك سمة inert المقترَحة. مما يمنع اختيار العناصر أو قراءتها بواسطة التقنيات المساعدة.

تجنب tabindex > 0

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

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

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

استخدام ميزة "tabindex أثناء التنقّل"

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

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

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

قبل

<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>

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

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