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

Rob Dodson

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

التركيز وترتيب التنقل باستخدام مفتاح التبويب (Tab)

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

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

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

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

  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 لتجنب إنشاء ترتيب التنقل بـ Tab غير منطقي. لإصلاح ترتيب التنقل بـ Tab غير منطقي أعلاه، انقل "كيوي" عائم بحيث يأتي بعد "Coconut" في DOM، لإزالة النمط المضمَّن.

ضبط إذن الوصول إلى المحتوى خارج الشاشة بشكل صحيح

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

لمنع عنصر تفاعلي معين من التركيز، يجب عليك امنح العنصر أيًا من خصائص CSS التالية:

  • display: none
  • visibility: hidden

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

  • display: block
  • visibility: visible

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

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