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

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

التركيز وترتيب علامات التبويب

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

لنقل التركيز في صفحة، استخدِم TAB للانتقال "إلى الأمام" وSHIFT + TAB للانتقال "إلى الخلف". غالبًا ما يتم الإشارة إلى العنصر الذي يتم التركيز عليه حاليًا باستخدام حلقة تركيز، وتختلف طريقة تصميم حلقة التركيز في المتصفحات المختلفة. يُعرف ترتيب التبويب باسم الترتيب الذي ينتقل فيه التركيز إلى الأمام والخلف من خلال العناصر التفاعلية.

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

يشكّل تطبيق ترتيب منطقي للتنقّل باستخدام مفتاح التبويب جزءًا مهمًا من توفير تجربة تنقّل سلسة باستخدام لوحة المفاتيح للمستخدمين. هناك فكرتان رئيسيتان يجب مراعاتهما عند تقييم ترتيب علامات التبويب وتعديله:

  1. ترتيب العناصر في DOM بترتيب منطقي
  2. ضبط مستوى ظهور المحتوى الذي لا يظهر على الشاشة والذي لا يجب أن يتلقّى التركيز بشكل صحيح

ترتيب العناصر في DOM بترتيب منطقي

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

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

جرِّب استخدام مفتاح التبويب (Tab) للتنقّل بين مجموعتَي الأزرار أدناه للتعرّف على ترتيب منطقي لاستخدام مفتاح التبويب مقارنةً بترتيب غير منطقي:

ترتيب علامات التبويب المنطقي

ترتيب علامات التبويب غير منطقي

في ما يلي مقارنة بين الرمز البرمجي لهذين المثالَين:

ترتيب علامات التبويب المنطقي

<button>Kiwi</button>
<button>Peach</button>
<button>Coconut</button>

ترتيب علامات التبويب غير منطقي

<button style="float: right">Kiwi</button>
<button>Peach</button>
<button>Coconut</button>

يجب توخّي الحذر عند تغيير الموضع المرئي للعناصر باستخدام CSS لتجنُّب إنشاء ترتيب غير منطقي للعلامات التبويب. لحلّ مشكلة ترتيب التبويب غير المنطقي أعلاه، عليك نقل زرّ "الكيوي" المتحرك لكي يظهر بعد زرّ "جوز الهند" في نموذج DOM، وإزالة النمط المضمّن.

ضبط مستوى ظهور المحتوى الذي لا يظهر على الشاشة بشكل صحيح

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

لمنع عنصر تفاعلي معيّن من تلقّي التركيز، عليك منح العنصر إحدى سمات CSS التالية:

  • display: none
  • visibility: hidden

لإضافة العنصر مرة أخرى إلى ترتيب علامات التبويب، على سبيل المثال عند فتح شريط التنقّل الجانبي، استبدِل سمات CSS أعلاه على التوالي بما يلي:

  • display: block
  • visibility: visible

الخطوات التالية

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