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

Rob Dodson

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 و حزمة :focus-visible polyfill. توضِّح المجموعة الأولى من الرموز البرمجية أدناه كيفية عمل ال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 {
  …
}