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

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 {
  …
}