يحدّد مؤشر التركيز، الذي يشار إليه غالبًا بـ "حلقة التركيز"، العنصر الذي يتم التركيز عليه في صفحتك. بالنسبة إلى المستخدمين الذين لا يمكنهم أو لا يريدون استخدام الماوس، تُعدّ هذه الإشارة مهمة للغاية لأنّها تعمل كبديل لمؤشر الماوس.
إذا كان مؤشر التركيز التلقائي للمتصفّح يتعارض مع تصميمك، يمكنك استخدام CSS لإعادة تصميمه. تذكَّر أن تضع المستخدمين في اعتبارك.
استخدام :focus لعرض مؤشر التركيز دائمًا
يتم تطبيق الفئة الزائفة :focus على العناصر التي يتم التركيز عليها، بغض النظر عن طريقة الإدخال
أو الجهاز (مثل الماوس أو لوحة المفاتيح أو قلم الشاشة) المستخدَم.
على سبيل المثال، يحتوي <div> التالي على tabindex يجعله قابلاً للتركيز،
مع نمط مخصّص لحالة :focus:
div[tabindex="0"]:focus {
outline: 4px dashed orange;
}
وبغض النظر عن الجهاز الذي تستخدمه، يظهر <div> بالشكل نفسه عند التركيز عليه.
لسوء الحظ، يمكن أن تكون المتصفحات غير متسقة في طريقة تطبيق التركيز. قد يعتمد ما إذا كان العنصر يتلقّى التركيز على المتصفّح ونظام التشغيل.
على سبيل المثال، يحتوي <button> التالي على CSS مخصّص لحالة :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 و:focus-visible. يوضّح الجزء الأول من الرمز البرمجي طريقة عمل polyfill، ويقدّم التطبيق النموذجي أدناه مثالاً على استخدام polyfill لتغيير مؤشر التركيز على أحد الأزرار.
/*
This hides the focus indicator if the element receives focus with a
mouse, but it still shows 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 {
...
}