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

Rob Dodson

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

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

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

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

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

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

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

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

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

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

جرِّب استخدام مفتاح التبويب (Tab) للتنقّل بين مجموعتَي الأزرار أدناه للتعرّف على ترتيب التبويب (Tab) المنطقي مقابل ترتيب التبويب (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 ولكن يجب ألا تكون في ترتيب التنقل بـ Tab. على سبيل المثال، إذا كانت لديك قائمة جانبية متجاوبة تفتح عند النقر على زر، يجب ألا يتمكّن المستخدم من التركيز على القائمة الجانبية عند إغلاقها.

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

  • display: none
  • visibility: hidden

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

  • display: block
  • visibility: visible

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

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