استخدام Tabindex

تعديل ترتيب DOM باستخدام tabindex

Dave Gash

Meggin Kearney

Rob Dodson

يعد ترتيب التنقل بـ Tab التلقائي الذي يوفره موضع DOM للعناصر الأصلية أمرًا ملائمًا، ولكن هناك أوقات تريد فيها تعديل ترتيب التنقل بـ Tab، ولا يكون نقل العناصر فعليًا في HTML دائمًا هو الحل الأمثل، أو حتى الحل الأمثل. في هذه الحالات، يمكنك استخدام سمة HTML tabindex لضبط موضع علامة تبويب العنصر بشكل صريح.

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

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

<custom-button tabindex="0">Press Tab to Focus Me!</custom-button>

يُرجى الضغط على Tab للتركيز على نشاطي.

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

// TODO: DevSite - Code sample removed as it used inline event handlers

// TODO: DevSite - تمت إزالة نموذج التعليمة البرمجية نظرًا لاستخدامه معالِجات الأحداث المضمنة

tabindex="5": يؤدي أي مؤشر جدولة أكبر من 0 إلى نقل العنصر إلى مقدّمة ترتيب التنقل بـ Tab الطبيعي. إذا كان هناك عناصر متعددة تحتوي على فهرس جدولة أكبر من 0، يبدأ ترتيب مفتاح التبويب (Tab) من أدنى قيمة أكبر من صفر ويعمل في اتجاهه الأعلى. إنّ استخدام مؤشر جدولة أكبر من 0 يُعتبر مضادًا للنمط.

<button>I should be first</button>
<button>And I should be second</button>
<button tabindex="5">But I jumped to the front!</button>

يجب أن أكون في المقام الأول ويجب أن أكون في المرتبة الثانية لكنني سرعان ما تقدَّمت في المقدمة.

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

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

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

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

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

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

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

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

<!-- Focus the element using Tab and use the up/down arrow keys to navigate -->
<select>
    <option>Aisle seat</option>
    <option>Window seat</option>
    <option>No preference</option>
</select>

مقعد بجانب الممر مقعد نافذة ما مِن مسودة مفضّلة

قد يكون من الصعب معرفة سلوكيات لوحة المفاتيح التي يجب تنفيذها، ولكن هناك مستند مفيد يمكنك الرجوع إليه. يسرد دليل ممارسات تأليف تطبيقات الإنترنت التفاعلية المتاحة للوصول (ARIA) أنواع المكوّنات وأنواع إجراءات لوحة المفاتيح التي تتوافق معها. سنتناول 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 على قائمة بأنماط التصميم وفي هذه القائمة يضم جدول خصائص المجموعات اللاسلكية، وهو المكوّن الحالي الذي يطابق العنصر الجديد إلى حد كبير.

كما ترى في الجدول، أحد سلوكيات لوحة المفاتيح الشائعة التي يجب دعمها هو مفاتيح الأسهم للأعلى/للأسفل/لليسار/لليمين. لإضافة هذا السلوك إلى المكوِّن الجديد، سنستخدم أسلوبًا يُطلق عليه مؤشر علامة التبويب المتجول.

يعمل مؤشر مفتاح التبويب (Tab) المتبدّل من خلال ضبط 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>

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

يمكنك تجربة المثال المكتمل أدناه. افحص العنصر في أدوات مطوّري البرامج لمراقبة انتقال مؤشر Tab من جهاز لاسلكي إلى آخر.

// TODO: DevSite - تمت إزالة نموذج التعليمة البرمجية نظرًا لاستخدامه معالِجات الأحداث المضمنة

يمكنك عرض المصدر الكامل لهذا العنصر على GitHub.

النماذج المشروطة وفخاخ لوحة المفاتيح

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

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

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

هناك بعض الاقتراحات حول كيفية تسهيل الأمر على المطوّرين، بما في ذلك العنصر <dialog>، ولكن هذه الاقتراحات غير متاحة على نطاق واسع إلى الآن.

يمكنك الاطّلاع على هذه المقالة حول MDN للاطّلاع على مزيد من المعلومات حول <dialog>، وكذلك على هذا المثال النموذجي للحصول على مزيد من المعلومات حول النوافذ المشروطة.

ننصحك باستخدام مربّع حوار نمطي يمثّله div يحتوي على بعض العناصر ومربّع div آخر يمثّل تراكبًا في الخلفية. دعنا نتعرف على الخطوات الأساسية اللازمة لتنفيذ فخ لوحة المفاتيح المؤقت في هذه الحالة.

1. باستخدام document.querySelector، اختَر علامات div المشروطة والتراكبية وخزّن المراجع الخاصة بها.
2. عند فتح النافذة المشروطة، يمكنك تخزين مرجع إلى العنصر الذي كان محل التركيز عند فتح النافذة حتى تتمكّن من إعادة التركيز إلى ذلك العنصر.
3. استخدِم أداة الاستماع إلى أسفل الشاشة للحصول على المفاتيح عند الضغط عليها عندما تكون النافذة مفتوحة. يمكنك أيضًا الاستماع إلى نقرة على تراكب الخلفية، و إغلاق النافذة إذا نقر المستخدم عليها.
4. بعد ذلك، احصل على مجموعة العناصر التي يمكن التركيز عليها داخل النافذة المشروطة. ستكون العناصر الأولى والأخيرة التي يمكن التركيز عليها بمثابة "حراسات" تتيح لك معرفة متى تعيد التركيز للأمام أو الخلف للبقاء داخل النافذة المشروطة.
5. عرض النافذة المشروطة والتركيز على أول عنصر يمكن التركيز عليه.
6. عندما يضغط المستخدم على Tab أو Shift+Tab، انقل التركيز إلى الأمام أو الخلف، مع تكرار العناصر الأخيرة أو الأولى حسب الحاجة.
7. إذا ضغط المستخدم على Esc، أغلِق النافذة. وهذا مفيد للغاية لأنه يسمح للمستخدم بإغلاق النافذة المشروطة دون البحث عن زر إغلاق معين، ويفيد حتى المستخدمين الذين يستخدمون الماوس.
8. عند إغلاق النافذة المشروطة، يمكنك إخفاؤها وتراكب الخلفية وإعادة التركيز على العنصر الذي تم التركيز عليه سابقًا والذي تم حفظه سابقًا.

يمنحك هذا الإجراء نافذة مشروطة سهلة الاستخدام وغير مزعجة يمكن للجميع استخدامها بشكل فعال.

لمزيد من التفاصيل، يمكنك فحص نموذج الرمز هذا، وعرض مثال مباشر من صفحة مكتملة.