بودكاست CSS - الحلقة 18: التركيز
على صفحة الويب، انقر على رابط ينقل المستخدم إلى المحتوى الرئيسي للموقع الإلكتروني. ويُشار إلى هذه الروابط غالبًا باسم روابط التخطّي أو روابط الربط. عند تفعيل هذا الرابط باستخدام لوحة مفاتيح، باستخدام مفتاحَي Tab وEnter، تظهر حلقة تركيز حول حاوية المحتوى الرئيسي. ما السبب؟
ويعود السبب في ذلك إلى أنّ <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،
ستتم إزالتها من فهرس علامات التبويب الشامل،
الذي يتم تحديده حسب ترتيب مصدر المستند.
سيتم الآن تحديد ترتيب التنقل باستخدام مفتاح التبويب حسب قيمة 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>أي من أجهزة الإدخال التالية يمكنها ضبط التركيز؟