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

روب دودسون

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

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

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

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

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

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

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

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

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

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

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

ترتيب التنقل بـ Tab منطقي

ترتيب التنقل بـ Tab غير منطقي

تتم مقارنة الرمز لهذين المثالين أدناه:

ترتيب التنقل بـ Tab منطقي

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

ترتيب التنقل بـ Tab غير منطقي

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

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

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

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

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

  • display: none
  • visibility: hidden

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

  • display: block
  • visibility: visible

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

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