موسيقى للتركيز

The CSS Podcast - 018: Focus

على صفحة الويب، انقر على رابط ينقل المستخدم إلى المحتوى الرئيسي للموقع الإلكتروني. ويُشار إلى هذه الروابط غالبًا باسم روابط التخطّي أو روابط الربط. عندما يتم تفعيل ذلك الرابط باستخدام لوحة مفاتيح باستخدام مفتاحَي tab وEnter، تتوفّر حلقة تركيز حول حاوية المحتوى الرئيسية. ما السبب؟

ويعود السبب في ذلك إلى أنّ <main> يحتوي على قيمة سمة tabindex="-1"، ما يعني أنّه يمكن التركيز عليه آليًا. عندما يتم استهداف <main>، لأنّ #main-content في شريط عنوان URL للمتصفّح يتطابق مع id، يتلقّى التركيز الآلي. قد يكون من المغري إزالة أنماط التركيز في هذه الحالات، ولكنّ التعامل مع التركيز بشكل مناسب وبعناية يساعد في توفير تجربة مستخدم جيدة وسهلة الاستخدام. يمكن أن يكون أيضًا مكانًا رائعًا لإضافة بعض الاهتمام إلى التفاعلات.

ما أهمية التركيز؟

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

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

ملاحظة: اطّلِع على مزيد من المعلومات عن أهمية التركيز لتسهيل الاستخدام في التعرّف على تسهيل الاستخدام: التركيز، ومزيد من المعلومات عن كيفية إدارة التركيز في HTML في التعرّف على HTML: التركيز.

كيف تجذب العناصر التركيز

يمكن التركيز على عناصر معيّنة تلقائيًا، وهي العناصر التي تقبل التفاعل والإدخال، مثل <a> و<button> و<input> و<select>. باختصار، جميع عناصر النموذج والأزرار والروابط. يمكنك عادةً التنقّل في العناصر التي يمكن التركيز عليها في موقع إلكتروني باستخدام مفتاح التبويب (Tab) للانتقال إلى الأمام في الصفحة، وShift + التبويب (Tab) للانتقال إلى الخلف.

هناك أيضًا سمة HTML تُسمى tabindex تتيح لك تغيير فهرس التبويب، وهو الترتيب الذي يتم فيه التركيز على العناصر، في كل مرة يضغط فيها المستخدم على مفتاح Tab، أو يتم نقل التركيز من خلال تغيير العلامة في عنوان URL أو من خلال حدث JavaScript. إذا تم ضبط tabindex في عنصر HTML على 0، يمكن التركيز على التركيز من خلال مفتاح علامة التبويب وسيتم استخدام فهرس علامة التبويب "العالمية" الذي يتم تحديده من خلال ترتيب مصدر المستند.

في حال ضبط tabindex على -1، لا يمكن التركيز عليه إلا آليًا، وهذا يعني فقط عند حدوث حدث JavaScript أو حدوث تغيير في التجزئة (مطابقة id للعنصر في عنوان URL). إذا ضبطت tabindex على أي قيمة أعلى من 0، ستتم إزالتها من فهرس علامات التبويب الشامل، الذي يتم تحديده حسب ترتيب مصدر المستند. سيتم الآن تحديد ترتيب التنقل باستخدام مفتاح التبويب حسب قيمة tabindex، وبذلك سيتلقّى العنصر الذي يحتوي على tabindex="1" التركيز قبل العنصر الذي يحتوي على tabindex="2"، على سبيل المثال.

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

تركيز التصميم

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

يمكن تغيير هذا السلوك باستخدام CSS، باستخدام الفئات الزائفة :focus و:focus-within و:focus-visible التي تعرّفت عليها في درس الفئات الزائفة. من المهم ضبط تنسيق تركيز يتميز بالتباين مع التنسيق التلقائي للعنصر. على سبيل المثال، من الطرق الشائعة استخدام السمة outline.

a:focus {
  outline: 2px solid slateblue;
}

يمكن أن تظهر السمة outline قريبة جدًا من نص الرابط، ولكن يمكن أن تساعد السمة outline-offset في ذلك، لأنّها تضيف padding مرئية إضافية بدون التأثير في الحجم الهندسي الذي يملؤه العنصر. ستؤدي القيمة الموجبة لرقم outline-offset إلى دفع المخطط الخارجي للخارج، بينما ستؤدي القيمة السالبة إلى سحب المخطط الداخلي للداخل.

في بعض المتصفّحات، إذا تم ضبط border-radius على العنصر وكنت تستخدم outline، لن يكون العنصر متطابقًا، لأنّ المخطط سيحتوي على زوايا حادة. لهذا السبب، قد يغري استخدام box-shadow مع نصف قطر تمويه صغير لأن box-shadow يتم تثبيته على الشكل مع الحفاظ على border-radius، ولكن هذا النمط لن يظهر في وضع التباين العالي في Windows. ويعود السبب في ذلك إلى أنّ "وضع التباين العالي" في نظام التشغيل Windows لا يطبّق الظلال، ويغضّ النظر في الغالب عن صور الخلفية لتفضيل الإعدادات المفضّلة للمستخدم.

الملخّص

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

• تجنَّب استخدام outline: none على عنصر يمكنه تلقّي تركيز لوحة المفاتيح.
• تجنَّب استبدال أنماط outline بأنماط box-shadow. لأنها لا تظهر في وضع التباين العالي في Windows.
• لا تضبط قيمة موجبة لسمة tabindex في عنصر HTML إلّا إذا كان ذلك ضروريًا.
• تأكَّد من أنّ حالة التركيز واضحة جدًا مقارنةً بالحالة التلقائية.

التحقق من فهمك

اختبِر معلوماتك حول التركيز

أيٌّ ممّا يلي من العناصر التي يمكن التركيز عليها تلقائيًا؟

<a>

🎉

<p>

يُرجى إعادة المحاولة.

<button>

🎉

<input>

🎉

<output>

يُرجى إعادة المحاولة.

<select>

🎉

أي من أجهزة الإدخال التالية يمكنه ضبط التركيز؟

جهاز تحكّم في الألعاب

غالبًا ما تُرسِل لوحات الألعاب أحداث لوحة المفاتيح عند الضغط على أزرارها.

لوحة المفاتيح

بالتأكيد يؤدي إلى التركيز عند استخدامه في التنقّل على الويب.

فأر

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

التكنولوجيا المساعدة (قارئ الشاشة ومفتاح التبديل وما إلى ذلك)

يتسبب بالتأكيد في التركيز عند استخدامه للتنقّل على الويب.

بطاطس

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