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

Rob Dodson

Alexandra Klepper

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

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

ما هو عنصر tabindex؟

إذا كنت بحاجة إلى تعديل ترتيب علامات التبويب التلقائي المقدَّم من العناصر المضمّنة، يمكنك استخدام سمة HTML‏ tabindex لضبط موضع علامة التبويب في عنصر بشكل صريح.

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

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

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

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

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

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

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

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

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

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

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

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

قد يكون من الصعب معرفة سلوكيات لوحة المفاتيح التي يجب تنفيذها. يسرد دليل ممارسات مؤلفي التطبيقات المتوافقة مع ARIA (Accessible Rich Internet Applications) أنواع المكوّنات وأنواع إجراءات لوحة المفاتيح التي تتوافق معها.

إدراج عنصر في ترتيب التبويب

أدخِل عنصرًا في ترتيب علامات التبويب الطبيعي باستخدام 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، يمكنك استخدام رمز polyfill inert في WICG. تحاكي تقنية polyfill سلوك سمة inert المقترَحة، التي تمنع التكنولوجيات المساعِدة من اختيار العناصر أو قراءتها.

تجنَّب tabindex > 0

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

يُعدّ استخدام قيمة tabindex أكبر من 0 نموذجًا خاطئًا لأنّه يتنقّل تطبيقات قراءة الشاشة في الصفحة بترتيب 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. يسرد هذا الدليل أنماط واجهة المستخدم الشائعة ويحدّد المفاتيح التي يجب أن تتوافق معها المكونات.