التركيز على النمط

Rob Dodson

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

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

استخدام :focus لعرض مؤشر التركيز دائمًا

يتم تطبيق الفئة الزائفة :focus في أي وقت يتم فيه التركيز على عنصر، بغض النظر عن جهاز الإدخال (الماوس أو لوحة المفاتيح أو قلم الشاشة أو غير ذلك) أو الطريقة المستخدَمة لتركيز العنصر. على سبيل المثال، تتضمّن السمة <div> أدناه عنصر tabindex، ما يجعلها قابلة للتركيز. تحتوي أيضًا على نمط مخصّص لحالتها :focus:

div[tabindex="0"]:focus {
  outline: 4px dashed orange;
}

بغض النظر عمّا إذا كنت تستخدم ماوس للنقر عليه أو استخدام لوحة مفاتيح للنقر عليه، ستبدو علامة <div> دائمًا بالشكل نفسه.

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

على سبيل المثال، تحتوي السمة <button> أدناه على نمط مخصّص لحالتها :focus أيضًا.

button:focus {
  outline: 4px dashed orange;
}

في حال النقر على <button> باستخدام ماوس في Chrome على نظام التشغيل macOS، من المفترَض أن يظهر لك نمط التركيز المخصّص. ومع ذلك، لن يظهر لك نمط التركيز المخصّص في حال النقر على <button> في متصفّح Safari على نظام التشغيل macOS. هذا لأنه في Safari، لا يتم التركيز على العنصر عند النقر فوقه.

نظرًا لأن سلوك التركيز غير متسق، فقد يتطلب الأمر القليل من الاختبار على أجهزة مختلفة للتأكد من أن أنماط التركيز مقبولة للمستخدمين.

استخدام ":focus-visible" لعرض مؤشر التركيز بشكل انتقائي

يتم تطبيق الفئة الزائفة الجديدة في :focus-visible في أي وقت يتم فيه التركيز على عنصر ما ويحدّد المتصفّح من خلال الأساليب البحثية أنّ عرض مؤشر التركيز سيكون مفيدًا للمستخدم. وعلى وجه التحديد، إذا كان آخر تفاعل للمستخدم من خلال لوحة المفاتيح ولم تتضمّن ضغطة المفتاح مفتاح تعريف أو ALT أو OPTION أو CONTROL، سيتطابق الضغط على :focus-visible.

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

button:focus-visible {
  outline: 4px dashed orange;
}

استخدام :focus-within لاختيار العنصر الرئيسي للعنصر الذي يتم التركيز عليه

يتم تطبيق الفئة الزائفة على عنصر :focus-within إما عندما يتلقّى العنصر نفسه تركيزًا أو عندما يتم التركيز على عنصر آخر داخل هذا العنصر.

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

form:focus-within {
  background: #ffecb3;
}

متى يتم عرض مؤشر التركيز

من القواعد الجيدة أن تسأل نفسك "إذا نقرت على عنصر التحكم هذا أثناء استخدام جهاز جوّال، هل تتوقع أن يعرض لوحة مفاتيح؟"

إذا كانت الإجابة "نعم"، من المفترض أن يعرض عنصر التحكّم دائمًا مؤشر تركيز، بغض النظر عن جهاز الإدخال المستخدَم لتركيزه. وخير مثال على ذلك العنصر <input type="text">. سيحتاج المستخدم إلى إرسال مدخلات إلى العنصر عبر لوحة المفاتيح بغض النظر عن كيفية تلقي عنصر الإدخال للتركيز في الأصل، لذلك من المفيد عرض مؤشر التركيز دائمًا.

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

تجنُّب outline: none

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

من الأمثلة الشائعة جدًا ضد النمط هو إزالة مؤشر التركيز باستخدام CSS مثل:

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

إنّ أفضل طريقة لحلّ هذه المشكلة هي استخدام تركيبة من :focus ورمز polyfill :focus-visible. توضح المجموعة الأولى من التعليمات البرمجية أدناه كيفية عمل polyfill، ويقدم نموذج التطبيق أسفلها مثالاً على استخدام polyfill لتغيير مؤشر التركيز على زر.

/*
  This will hide the focus indicator if the element receives focus via the
  mouse, but it will still show up on keyboard focus.
*/
.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}

/*
  Optionally: Define a strong focus indicator for keyboard focus.
  If you choose to skip this step, then the browser's default focus
  indicator will be displayed instead.
*/
.js-focus-visible .focus-visible {
  …
}