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

بودكاست CSS - 018: التركيز

في صفحة الويب الخاصة بك، تنقر فوق رابط ينقل المستخدم إلى المحتوى الرئيسي لموقع الويب. ويُشار إلى هذه الروابط غالبًا باسم "روابط التخطّي" أو "روابط الارتساء". وعندما يتم تفعيل هذا الرابط من خلال لوحة مفاتيح، باستخدام مفتاحَي Tab وEnter، ستظهر حاوية المحتوى الرئيسية حولها حلقة تركيز. Why is that?‎

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

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

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

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

كيف يتم التركيز على العناصر

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

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

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

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

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

يمكن تغيير هذا السلوك في لغة 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 فقط إذا اقتضى الأمر ذلك.
• تأكَّد من أنّ حالة التركيز واضحة جدًا مقارنةً بالحالة التلقائية.

التحقّق من استيعابك

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