تركيز لوحة المفاتيح

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

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

قد يختار بعض الأشخاص غير المصابين بإعاقات التنقّل باستخدام لوحة المفاتيح أيضًا.

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

في هذه الوحدة، نركّز على بنية HTML وتنسيق CSS لعناصر لوحة المفاتيح والعناصر القابلة للتركيز. تتضمّن وحدة JavaScript مزيدًا من المعلومات حول إدارة التركيز وضغطات المفاتيح للعناصر التفاعلية.

ترتيب التركيز

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

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

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

يمكنك تعديل ترتيب التركيز لتضمين أي عناصر لا تتلقّى التركيز عادةً، مثل عناصر HTML غير التفاعلية أو المكوّنات المخصّصة أو العناصر التي تتضمّن ARIA، وتجاوز دلالات التركيز الطبيعية.

Tabindex

يبدأ ترتيب التركيز بالعناصر التي تتضمّن سمة tabindex موجبة (إن وُجدت) وينتقل من أصغر رقم موجب إلى أكبره (مثل 1 و2 و3). بعد ذلك، ينتقل إلى العناصر التي تتضمّن tabindex بقيمة صفر وفقًا لترتيبها في DOM. تتم إزالة أي عناصر تتضمّن tabindex سالبة من ترتيب التركيز الطبيعي.

عند تطبيق tabindex بقيمة صفر (tabindex="0") على العناصر التي لا يمكن التركيز عليها عادةً، تتم إضافتها إلى ترتيب التركيز الطبيعي للصفحة وفقًا لطريقة ظهورها في DOM. ومع ذلك، على عكس عناصر HTML القابلة للتركيز بشكل طبيعي، يجب توفير إمكانية استخدام لوحة المفاتيح الإضافية لكي تكون هذه العناصر متاحة بالكامل.

وبالمثل، إذا كان لديك عنصر يمكن التركيز عليه عادةً ولكنه غير نشط، مثل زر غير صالح إلى أن يتم ملء حقل الإدخال، عليك إضافة tabindex سالبة (tabindex="-1") إلى هذا العنصر. تشير إضافة tabindex سالبة إلى التقنيات المساعدة ولوحات المفاتيح إلى أنّه يجب إزالة هذا الزر من ترتيب التركيز الطبيعي. ولكن لا تقلق، يمكنك استخدام JavaScript لإعادة التركيز إلى العنصر عند الحاجة.

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

روابط التخطّي

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

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

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

مثل جميع الروابط، من المهم أن يتضمّن رابط التخطّي سياقًا حول الغرض من الرابط. تتيح إضافة عبارة "الانتقال إلى المحتوى الرئيسي" للمستخدم معرفة الوجهة التي سينتقل إليها الرابط. هناك العديد من خيارات الرموز البرمجية التي يمكنك الاختيار من بينها عند توفير سياق إضافي لروابطك، مثل aria-labelledby، aria-label، أو إضافتها إلى محتوى النص الخاص بعنصر <a>، كما هو موضّح في المثال.

مؤشر التركيز

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

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

التنسيق التلقائي للمتصفّح

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

إذا سمحت للمتصفّح بمعالجة تنسيق التركيز، من المهم مراجعة الرمز البرمجي للتأكّد من أنّ مظهرك لن يتجاوز التنسيق التلقائي للمتصفّح. غالبًا ما تتم كتابة التجاوز على النحو "outline: 0" أو "outline: none" في ورقة الأنماط. يمكن أن تؤدي هذه الجزئية الصغيرة من الرمز البرمجي إلى إزالة تنسيق مؤشر التركيز التلقائي للمتصفّح، ما يجعل من الصعب جدًا على المستخدمين التنقّل في موقعك الإلكتروني أو تطبيقك.

صيغة غير محبَّذة: بدون حد

a:focus {
  outline: none; /* don't do this! */
}

صيغة محبَّذة: حد منسَّق

a:focus {
  outline: auto 5px Highlight; /* for non-webkit browsers */
  outline: auto 5px -webkit-focus-ring-color; /* for webkit browsers */
}

الأنماط المخصَّصة

بالطبع، يمكنك تجاوز نمط المتصفّح التلقائي وإنشاء مؤشر تركيز مخصّص يكمّل مظهرك. عند إنشاء مؤشر تركيز مخصّص، لديك الكثير من الحرية لتكون مبدعًا.

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

يمكنك تغيير نمط مؤشر التركيز لضمان ظهوره. على سبيل المثال، عندما تكون الصفحة بخلفية بيضاء، يمكنك ضبط مؤشر تركيز الزر على خلفية زرقاء. عندما تكون الصفحة بخلفية زرقاء، يمكنك ضبط نمط تركيز الزر نفسه على خلفية بيضاء.

يمكنك تغيير نمط عنصر التركيز استنادًا إلى نوع العنصر. على سبيل المثال، يمكنك استخدام خط سفلي منقط لروابط النص الأساسي، ولكن اختيار إطار مستدير لعنصر الزر.

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