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

Rob Dodson

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

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

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

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

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

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

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

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

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

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

جرب التنقل بين مجموعتي الأزرار أدناه لتجربة ترتيب علامات تبويب منطقي مقابل ترتيب علامات جدولة غير منطقي:

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

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

تتم مقارنة التعليمات البرمجية لهذين المثالين أدناه:

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

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

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

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

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

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

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

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

  • display: none
  • visibility: hidden

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

  • display: block
  • visibility: visible

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

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