focus-visible وfocus: متى يظهر مؤشر التركيز؟

الخلاصة السريعة

افصل التركيز عن إظهار المؤشر

استخدم focus-visible لتخصيص مظهر المؤشر مع احترام قرار المتصفح بوقت ظهوره؛ لا تخلطه مع وجود التركيز نفسه. [1]

يمكن لزر أن يحمل التركيز دون أن يرسم المتصفح حوله الحلقة الافتراضية بعد نقرة. وإذا نسّقت focus مباشرة، فإن قاعدتك تطبق على العنصر المركّز بصرف النظر عن وسيلة الوصول إليه. أما focus-visible فتتيح لك تغيير شكل الإشارة مع الإبقاء على منطق المتصفح الانتقائي. لا تجعل غياب الإطار دليلًا على غياب التركيز. [1]

لماذا يظهر عند النقر في حقل نص؟

النقر في حقل نص قد يُظهر المؤشر أيضًا؛ focus-visible لا تعني استعمال لوحة المفاتيح حصريًا. [2]

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

أضف إطارًا واترك بديل المتصفح متاحًا

ترسم outline إطارًا لا يحجز مساحة في التخطيط، وتضبط outline-offset بُعده عن حدود العنصر. [4]

أضف HTML التالي إلى صفحة، ثم ضع CSS في style داخل رأسها. اخترنا إطارًا أخضر داكنًا بسماكة ثلاثة بكسلات وإزاحة مماثلة؛ اللون والقيم اختيار للتجربة. راجع وضوحه فوق خلفية تصميمك، وافحص ألا يختفي جزء منه قرب الحواف. تغيير الإطار هنا لا يحتاج إلى تبديل عرض الزر أو حشو الحقل. [4]

لا يتضمن المثال قاعدة outline: none عامة. إذا لم يدعم المتصفح focus-visible، تبقى أنماط التركيز الأصلية ما دمت لم تلغها بتنسيقات أخرى. إزالة المؤشر الافتراضي تستلزم بديلًا مرئيًا؛ راجع أيضًا أي ملف تنسيق سابق يمسح الإطارات. [1] [4]

مرّر الشيفرة أفقيًا عند الحاجة.

<button type="button">جرّب الزر</button>
<label>اسم تجريبي <input type="text"></label>

مرّر الشيفرة أفقيًا عند الحاجة.

button:focus-visible,
input:focus-visible {
  outline: 3px solid #0b6655;
  outline-offset: 3px;
}

قارن النتيجة بالتنقل والنقر

اختبر Tab، ثم Shift وTab معًا، على كل عنصر؛ وقارن النقر على الزر بالنقر داخل الحقل. [3]

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