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

على صفحة الويب، انقر على رابط ينقل المستخدم إلى المحتوى الرئيسي للموقع الإلكتروني. ويُشار إلى هذه الروابط غالبًا باسم روابط التخطّي أو روابط الربط. عندما يتم تفعيل ذلك الرابط باستخدام لوحة مفاتيح باستخدام مفتاحَي 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، يمكن التركيز على التركيز من خلال مفتاح علامة التبويب وسيتم استخدام فهرس علامة التبويب "العالمية" الذي يتم تحديده من خلال ترتيب مصدر المستند.

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

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

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

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

<button>
<p>
<output>
<input>
<select>
<a>

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

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