تركيز مرئي: لا تخفِ المخطط أبداً

لا يستطيع مستخدم لوحة المفاتيح رؤية سوى شيء واحد في كل مرة: عنصر التحكم الذي يملك التركيز. يُسمى هذا المؤشر المرئي مؤشر التركيز. 👀

يرسم المتصفح افتراضيًا إطار تركيز حول العنصر النشط أثناء التنقل باستخدام Tab. وهو مؤشر «أنت هنا» المدمج.

غالبًا ما لا يحب المصممون الإطار فيحذفونه. فهذه القاعدة وحدها، outline none، تعمي مستخدمي لوحة المفاتيح فورًا. يُرجى عدم نشرها دون بديل.

يمكنك إزالة الإطار الافتراضي، ولكن فقط إذا أضفت بديلًا واضحًا. لا تترك عنصر تحكم يملك التركيز يبدو مطابقًا تمامًا لعنصر غير نشط.

يسهل ملاحظة المؤشر الجيد: إطار سميك أو حلقة أو تغير قوي في اللون. إن الدقة الخفية هي العدو هنا، وليست صديقك.

يعرض المحدد focus-visible الحلقة لمستخدمي لوحة المفاتيح، لكنه يخفيها عند النقر العادي بالفأرة. وهكذا تحصل على الأمان دون تشويش بصري.

لا يفيد أحدًا إطار يندمج مع الخلفية. يجب أن يتوفر في نمط التركيز لديك قدر كافٍ من التباين ليبرز أمام الصفحة.

انتبه إلى استخدام overflow hidden في عنصر أب. فقد يقص إطار التركيز، فتختفي حافته السفلية دون ملاحظة.

استخدم outline-offset لإبعاد الحلقة عن العنصر. إذ تجعل فجوة صغيرة ملاحظة المؤشر أسهل بكثير.

هذا ليس مجرد تحسين شكلي. تشترط WCAG وجود مؤشر تركيز مرئي على كل عنصر تفاعلي، ولذلك قد يؤدي إخفاؤه إلى عدم استيفاء المعيار.

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

لا تزل حلقة التركيز أبدًا دون استبدالها. فضّل focus-visible، وامنحها تباينًا وإزاحةً قويين، واختبرها بنفسك باستخدام Tab. ✅