يعتمد العديد من المستخدمين على لوحة المفاتيح للتنقّل في التطبيقات، بدءًا من المستخدمين الذين يعانون من ضعف مؤقت ودائم في الحركة إلى المستخدمين الذين يستفيدون من اختصارات لوحة المفاتيح لزيادة الكفاءة والإنتاجية. إنّ اتّباع استراتيجية جيدة للتنقّل باستخدام لوحة المفاتيح في تطبيقك يساهم في توفير تجربة أفضل للجميع.
التركيز وترتيب علامات التبويب
في لحظة معيّنة، يشير مصطلح التركيز إلى العنصر الذي يتلقّى حاليًا إدخالات من لوحة المفاتيح في تطبيقك، مثل حقل أو مربّع اختيار أو زر أو رابط. بالإضافة إلى أحداث لوحة المفاتيح، يتلقّى العنصر الذي تم التركيز عليه أيضًا المحتوى الذي تم لصقه من الحافظة.
لنقل التركيز على صفحة، استخدِم TAB للتنقل "للأمام" وSHIFT + TAB للتنقل "للخلف". غالبًا ما تتم الإشارة إلى العنصر الذي تم التركيز عليه من خلال حلقة التركيز، وتختلف طريقة تصميم حلقات التركيز في المتصفّحات المختلفة. يُطلق على ترتيب انتقال التركيز للأمام والخلف بين العناصر التفاعلية اسم ترتيب علامات التبويب.
عناصر HTML التفاعلية، مثل حقول النص والأزرار وقوائم الاختيار، تكون قابلة للتركيز ضمنيًا، أي يتم إدراجها تلقائيًا في ترتيب علامات التبويب استنادًا إلى موضعها في DOM. تتضمّن هذه العناصر التفاعلية أيضًا معالجة مدمجة لأحداث لوحة المفاتيح. لا يمكن التركيز ضمنيًا على عناصر مثل الفقرات وعناصر div لأنّ المستخدمين لا يحتاجون عادةً إلى التفاعل معها.
يُعدّ تنفيذ ترتيب منطقي للتنقل بـ Tab جزءًا مهمًا من توفير تجربة سلسة للمستخدمين عند التنقل باستخدام لوحة المفاتيح. هناك فكرتان رئيسيتان يجب أخذهما في الاعتبار عند تقييم ترتيب علامات التبويب وتعديله:
- ترتيب العناصر في DOM ليكون بترتيب منطقي
- ضبط مستوى عرض المحتوى خارج الشاشة الذي لا يجب أن يتلقّى التركيز بشكل صحيح
ترتيب العناصر في DOM ليكون بترتيب منطقي
للتحقّق مما إذا كان ترتيب علامات التبويب في تطبيقك منطقيًا، جرِّب التنقّل بين علامات التبويب في صفحتك. بشكل عام، يجب أن يتبع التركيز ترتيب القراءة، أي الانتقال من اليمين إلى اليسار، ومن أعلى الصفحة إلى أسفلها.
إذا بدا ترتيب التركيز غير صحيح، عليك إعادة ترتيب العناصر في نموذج المستند (DOM) لجعل ترتيب علامات التبويب أكثر منطقية. لتغيير الترتيب المرئي على موقعك الإلكتروني، انقل العنصر إلى موضع سابق في نموذج المستند بدلاً من ضبط نمطه ليظهر في موضع سابق باستخدام CSS.
على سبيل المثال:
<button style="float: right">Kiwi</button> <button>Peach</button> <button>Coconut</button>
<button>Peach</button> <button>Coconut</button> <button>Kiwi</button>
يجب توخّي الحذر عند تغيير الموضع المرئي للعناصر باستخدام CSS لتجنُّب إنشاء ترتيب غير منطقي للعلامات. لإصلاح ترتيب علامات التبويب غير المنطقي، نقلنا الزر العائم "كيوي" ليظهر بعد "جوز الهند" وأزلنا النمط المضمّن.
ضبط إعدادات ظهور المحتوى خارج الشاشة بشكل صحيح
في بعض الأحيان، يجب أن تكون العناصر التفاعلية خارج الشاشة في نموذج المستند (DOM)، ولكن يجب ألا تكون في ترتيب علامات التبويب. على سبيل المثال، إذا كان لديك شريط تنقّل متجاوب يفتح في شريط جانبي عند النقر على زر، يجب ألا يتمكّن المستخدم من التركيز على شريط التنقّل عندما يكون مغلقًا.
لمنع عنصر تفاعلي معيّن من تلقّي التركيز، عليك منح العنصر إحدى خاصيتَي CSS التاليتَين:
display: nonevisibility: hidden
لإعادة إضافة العنصر إلى ترتيب علامات التبويب، مثلاً عندما يكون شريط التنقّل مفتوحًا، استبدِل سمات CSS هذه بما يلي:
display: blockvisibility: visible
الخطوات التالية
بالنسبة إلى المستخدمين الذين يشغّلون أجهزة الكمبيوتر الخاصة بهم بالكامل تقريبًا باستخدام لوحة المفاتيح أو جهاز إدخال آخر، يكون ترتيب علامات التبويب المنطقي ضروريًا لجعل تطبيقك متاحًا وسهلاً للاستخدام. من العادات الجيدة التي يجب اتّباعها للتحقّق من ترتيب التنقّل بـ Tab، محاولة التنقّل بـ Tab في تطبيقك قبل كل عملية نشر.