بودكاست CSS - 018: التركيز
في صفحة الويب لديك، النقر على رابط يتخطى المستخدم إلى المحتوى الرئيسي لموقع الويب. ويُشار إلى هذه الروابط غالبًا باسم روابط التخطّي أو روابط الارتساء. عندما يتم تفعيل ذلك الرابط بواسطة لوحة مفاتيح، باستخدام مفتاحي tab وEnter، تحيط حاوية المحتوى الرئيسية بحلقة تركيز. ما السبب؟
ويرجع ذلك إلى أنّ قيمة السمة tabindex="-1"
للسمة <main>
هي
ما يعني أنّه يمكن التركيز عليها بشكل آلي
عند استهداف <main>
، لأن #main-content
في شريط عنوان URL بالمتصفّح مع علامة id
، حيث يتم التركيز بشكل آلي.
قد يكون من المغري إزالة أنماط التركيز في هذه المواقف،
ولكن التعامل مع التركيز بشكل مناسب وبعناية يساعد على إنشاء
وسهل الوصول إليها، وتجربة المستخدم.
يمكن أن يكون أيضًا مكانًا رائعًا لإضافة بعض الاهتمام إلى التفاعلات.
ما سبب أهمية التركيز؟
بصفتي مطور ويب، فإن وظيفتك هي جعل موقع الويب يسهل الوصول إليه وشاملًا للجميع. يشكّل إنشاء حالات تركيز يسهل الوصول إليها باستخدام CSS جزءًا من هذه المسؤولية.
تساعد أنماط التركيز الأشخاص الذين يستخدمون جهازًا مثل لوحة المفاتيح أو التحكّم بمفتاح تحكّم للتنقل والتفاعل مع موقع الويب. إذا تلقى عنصر التركيز ولا يوجد مؤشر مرئي، قد يفقد المستخدم تتبع ما يتم التركيز عليه. وقد يؤدي ذلك إلى حدوث مشاكل في التنقل وإلى سلوك غير مرغوب فيه إذا: لنفترض أنه تم اتباع الرابط الخطأ.
كيف تجذب العناصر التركيز
يمكن التركيز تلقائيًا على بعض العناصر؛
هذه هي العناصر التي تقبل التفاعل والإدخال، مثل <a>
<button>
و<input>
و<select>
باختصار، جميع عناصر النموذج والأزرار والروابط.
يمكنك عادةً التنقّل بين العناصر في الموقع الإلكتروني التي يمكن التركيز عليها باستخدام المفتاح tab للانتقال إلى الصفحة التالية، وshift + tab للانتقال إلى الخلف.
هناك أيضًا سمة HTML تُسمى tabindex
تسمح لك بتغيير فهرس علامات التبويب، وهو
بالترتيب الذي يتم به التركيز على العناصر - في كل مرة يضغط فيها شخص ما على مفتاح Tab،
أو يتم تغيير التركيز مع تغيير التجزئة في عنوان URL أو بواسطة حدث JavaScript.
إذا تم ضبط tabindex
في عنصر HTML على 0
،
يمكنه التركيز على التركيز عبر مفتاح tab وسيتم التركيز على فهرس علامة التبويب العمومي (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 إلا إذا أردت ذلك بالتأكيد. - تأكَّد من أنّ حالة التركيز واضحة جدًا مقارنةً بالحالة التلقائية.
التحقق من فهمك
اختبر معلوماتك حول التركيز
أي مما يلي يعد عناصر يمكن التركيز عليها تلقائيًا؟
<a>
<p>
<button>
<input>
<output>
<select>
أي من أجهزة الإدخال التالية يمكنه ضبط التركيز؟