تتضمّن عناصر HTML العادية، مثل <button> أو <input>، إمكانية الوصول إلى لوحة المفاتيح، ويجب استخدامها كلما أمكن ذلك. مع ذلك، إذا كنت بحاجة إلى إنشاء عناصر تفاعلية مخصّصة، يمكنك إنشاء السلوك المتوقّع للمستخدم من خلال إضافة tabindex.
لا تضِف tabindex إلا إلى المحتوى التفاعلي. حتى إذا كان المحتوى مهمًا، مثل صورة رئيسية، يمكن لمستخدمي قارئ الشاشة فهمه دون إضافة تركيز.
ما هو Tabindex؟
عندما تحتاج إلى تعديل الترتيب التلقائي لعلامات التبويب الذي توفّره العناصر المضمَّنة، يمكنك استخدام سمة HTML tabindex لضبط موضع علامة تبويب أحد العناصر بشكل صريح.
يمكن تطبيق tabindex على أي عنصر، مع أنّه يجب تطبيقه فقط على العناصر التفاعلية، ويأخذ نطاقًا من قيم الأعداد الصحيحة. باستخدام tabindex، يمكنك تحديد ترتيب صريح لعناصر الصفحة القابلة للتركيز، وإدراج عنصر لا يمكن التركيز عليه في ترتيب التنقل بـ Tab وإزالة العناصر من ترتيب التنقل بـ Tab. مثلاً:
tabindex="0": يدرج عنصرًا في ترتيب التنقل بـ Tab العادي. ويمكن التركيز على العنصر بالضغط على Tab، ويمكن التركيز على العنصر من خلال استدعاء طريقة focus().
tabindex="-1": يزيل عنصرًا من ترتيب التنقل العادي، ولكن يمكن أن يظل التركيز على العنصر عن طريق استدعاء طريقة focus()
tabindex="5": أي عنصر Tabindex أكبر من 0 يضع هذا العنصر في مقدمة ترتيب التنقل الطبيعي. إذا كان هناك عدة عناصر تحتوي على فهرس Tab أكبر من 0، يبدأ ترتيب التنقل بـ Tab من أدنى قيمة أكبر من صفر ويسير في طريقه لأعلى. ويُعدّ استخدام Tabindex أكبر من 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>
يؤدي ذلك إلى إزالة عنصر من ترتيب التنقل بـ Tab عادي، ولكن يمكن أن يتم التركيز
على العنصر من خلال استدعاء طريقة focus().
لا يؤثر تطبيق tabindex="-1" على عنصر في عناصره الثانوية. أمّا إذا كانت مرتّبة بشكل طبيعي بعلامة التبويب (Tab) أو كانت بقيمة tabindex، ستظل بالترتيب نفسه باستخدام مفتاح التبويب (Tab).
لإزالة عنصر وكل عناصره الثانوية من ترتيب التنقل بـ Tab، يمكنك استخدام رمز polyfill inert في WICG.
تحاكي سمة polyfill سلوك سمة inert المقترَحة، ما يمنع اختيار العناصر أو قراءتها باستخدام التكنولوجيا المساعِدة.
تجنب tabindex > 0
ويؤدي زيادة قيمة tabindex أكبر من 0 إلى نقل العنصر إلى بداية ترتيب علامة التبويب الطبيعية. إذا كان هناك عدة عناصر تحتوي على قيمة tabindex أكبر من 0، يبدأ ترتيب التنقل بـ Tab من أدنى قيمة أكبر من صفر وينتقل.
يُعدّ استخدام قيمة أكبر من 0 tabindex نمطًا مضادًا للنمط لأنّ برامج قراءة الشاشة تنقّل في الصفحة بترتيب DOM وليس بترتيب DOM. إذا كنت بحاجة إلى
عنصر يأتي بشكل أسرع في ترتيب التنقل بـ 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. يسرد هذا الدليل أنماط واجهة المستخدم الشائعة ويحدد المفاتيح التي يجب أن تدعمها المكونات الخاصة بك.