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

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

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

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

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

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

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

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

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

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

فهرس علامات التبويب

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

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

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

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

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

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

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

عندما يضغط المستخدم على مفتاح Tab، ويكون هناك رابط تخطي نشط في مكانه، فإنه يرسل تركيز لوحة المفاتيح إلى رابط التخطي. يمكن للمستخدم النقر فوق رابط التخطي والانتقال بسرعة عبر قسم العنوان والتنقل الرئيسي. إذا اختار عدم النقر على رابط تخطي الرابط واستمر في النقر على 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 */
}

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

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

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

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

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

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

الخاتمة

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

التحقّق من استيعابك

اختبر معلوماتك حول ARIA وHTML