حالات التركيز الواضحة
لماذا يجب أن يكون التركيز مرئيًا
التركيز هو العنصر الذي يستقبل إدخال لوحة المفاتيح حاليًا. عندما يضغط المستخدم Tab يكون مؤشر التركيز الدليل الوحيد على موضعه في الصفحة.
تشترط WCAG 2.4.7 (ظهور التركيز، المستوى AA) أن يكون لأي واجهة تعمل بلوحة المفاتيح مؤشر تركيز مرئي. وبدونه يتنقل مستخدمو لوحة المفاتيح وأجهزة التبديل ومكبّرات الشاشة بلا رؤية.
تصميم مؤشر جيد
- لا تُزل الإطار دون بديل. كتابة <code>;outline: none<;/code>; دون تعويضه تخالف WCAG 2.4.7.
- استهدف تباينًا بنسبة 3:1 بين المؤشر والألوان المجاورة له، وفق إرشادات تباين غير النص (WCAG 1.4.11).
- اجعله سميكًا بما يكفي ليُلاحَظ. إطار بسماكة 2 بكسل مع إزاحة صغيرة خيار شائع وواضح.
- افحص كل الخلفيات. الحلقة الزرقاء التي تنجح على الأبيض قد تختفي على قسم داكن أو ملوّن.
الحلقات ثنائية اللون (خط فاتح وآخر داكن) تبقى ظاهرة على أي خلفية تقريبًا.
:focus مقابل :focus-visible
يطابق المحدد <code>;:focus<;/code>; العنصر كلما حصل على التركيز، حتى بعد نقرة الفأرة. ولهذا أزال كثيرون الإطارات: كانت الأزرار تُظهر حلقة بعد النقر.
يترك المحدد <code>;:focus-visible<;/code>; القرار للمتصفح. فهو يطابق عمومًا عند التركيز بلوحة المفاتيح وفي حقول النص، وغالبًا لا يطابق عند نقر الفأرة على الأزرار.
نمط بسيط: نسّق <code>;:focus-visible<;/code>; بإطار واضح واترك السلوك الافتراضي يتولى الباقي.
ألا يُحجب التركيز
أضافت WCAG 2.2 المعيار 2.4.11 (عدم حجب التركيز، الحد الأدنى) من المستوى AA. يجب ألا يُحجب العنصر المركَّز عليه كليًا بمحتوى من إنشاء الموقع، مثل شريط علوي ثابت أو لافتة الكوكيز أو أداة الدردشة.
- ابتعد عن الفأرة واضغط Tab عبر الصفحة كلها.
- راقب المؤشر. هل هو ظاهر دائمًا وداخل الشاشة؟
- تأكد أن الأشرطة الثابتة لا تغطي العنصر المركَّز. في CSS يساعد <code>;scroll-padding-top<;/code>; على إبقائه ظاهرًا.
يسهل نسيان تصميم التركيز لأنه لا يظهر في التصميم الثابت. أضف حالات التركيز إلى مكتبة المكوّنات ليكون لكل زر ورابط وحقل وبطاقة حالة تركيز افتراضية.
- لكل عنصر تفاعلي حالة تركيز في ملف التصميم إلى جانب التحويم والضغط.
- لا يُقتطع المؤشر بسبب عنصر أب يحمل <code>;overflow: hidden<;/code>;.
- المكوّنات المخصصة، كالبطاقات التي تعمل كروابط، تُظهر التركيز على كامل المنطقة القابلة للنقر.
- يختلف شكل التركيز عن التحويم ليميّز المستخدم بينهما.
إذا لم يُعرض التصميم إلا بالفأرة فستبقى مشكلات التركيز خفية حتى يكتشفها مستخدم لوحة المفاتيح.
المصادر
- W3C. Understanding SC 2.4.7 Focus Visible. https://www.w3.org/WAI/WCAG22/Understanding/focus-visible.html
- W3C. Understanding SC 2.4.11 Focus Not Obscured (Minimum). https://www.w3.org/WAI/WCAG22/Understanding/focus-not-obscured-minimum.html
- MDN Web Docs. :focus-visible. https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
صيغ هذا الدليل بمساعدة الذكاء الاصطناعي اعتمادًا على معايير ومراجع عامة. وللنص الدقيق لأي معيار، ارجع إلى المصادر المذكورة أعلاه.