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

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

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

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

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

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

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

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

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

يمكن التركيز تلقائيًا على بعض العناصر؛ هذه هي العناصر التي تقبل التفاعل والإدخال، مثل <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" مثلاً.

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

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

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

يمكن تغيير هذا السلوك باستخدام 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>

🎉

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

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

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

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

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

فأر

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

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

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

بطاطس

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