اختبار إمكانية الوصول: color-contrast وfocus

يتحكم CSS في تباين الألوان، ووضوح مؤشرات التركيز، وظهور العناصر (إذ يزيل display:none العنصر من شجرة إمكانية الوصول)، وترتيب القراءة (إعادة الترتيب المرئي عبر flexbox order مقابل ترتيب DOM). وتؤثر خيارات CSS مباشرةً في قدرة المستخدمين ذوي الإعاقة على استخدام الواجهة.

يتطلب WCAG 2.1 AA نسبة تباين قدرها 4.5:1 للنص العادي و3:1 للنص الكبير (18px+ بخط عريض أو 24px+ بخط عادي). ويتطلب AAA نسبتي 7:1 و4.5:1 على التوالي. وتقارن هذه النسب نصوع لون النص في المقدمة بنصوع لون الخلفية.

انقر على أي عنصر نصي في DevTools ← لوحة Styles. يعرض نموذج اللون شارة نسبة التباين. وتشير علامة الصح إلى النجاح، بينما تشير X إلى الفشل. ويعرض منتقي الألوان خطوط حدود AA/AAA على تدرج الألوان.

تدقق axe-core وLighthouse وPa11y تلقائيًا في نسب التباين عبر جميع العناصر النصية. شغّل axe-core مع @axe-core/react أثناء التطوير للحصول على تحذيرات تباين فورية في وحدة تحكم المتصفح خلال عملية التطوير.

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

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

يقدم WCAG 2.2 معيار النجاح 2.4.11 (Focus Appearance AA): يجب أن تتمتع مؤشرات التركيز بتباين لا يقل عن 3:1 مقابل الألوان المجاورة، وأن تحيط بمحيط المكون. ويجب أن تستوفي أنماط التركيز المخصصة هذه المتطلبات، لا أن تكون موجودة فحسب.

يتجاوز وضع التباين العالي في Windows ألوان CSS باستخدام ألوان النظام التي يحددها المستخدم. استخدم @media (forced-colors: active) لتوفير أنماط بديلة تعمل في وضع التباين العالي. اختبر ذلك عبر الإعدادات ← إمكانية الوصول ← التباين العالي في Windows.

يحظر WCAG 1.4.1 استخدام اللون باعتباره الوسيلة الوحيدة لنقل المعلومات. فحالة الخطأ التي تتحول إلى الأحمر فقط لا تستوفي هذا المعيار. اجمع اللون مع الأيقونات أو التسميات النصية أو الأنماط أو الخطوط السفلية، بحيث تكون المعلومات غير المعتمدة على اللون موجودة دائمًا.

يتطلب WCAG 1.4.4 إمكانية تغيير حجم النص إلى 200% من دون فقدان المحتوى. ويتطلب WCAG 1.4.12 ألا تؤدي تجاوزات تباعد النص (زيادة letter-spacing وline-height) إلى كسر التخطيط. استخدم الوحدات النسبية (rem وem) للطباعة لدعم كلا المتطلبين.

تشمل اختبارات CSS الشاملة لإمكانية الوصول: إضافة axe DevTools للمتصفح أثناء التطوير، وLighthouse CI لفحوصات خط الأنابيب الآلية، وPa11y لتدقيق الصفحات من سطر الأوامر، والاختبار اليدوي للتنقل باستخدام لوحة المفاتيح عبر Tab/Shift+Tab للتحقق من وضوح مؤشرات التركيز وترتيبها.

لماذا يجب ألا يكون outline: none هو CSS النهائي لحالة :focus الخاصة بالعنصر؟

يغطي اختبار CSS لإمكانية الوصول نسب تباين الألوان (حد AA الأدنى هو 4.5:1)، ومؤشرات التركيز المرئية والمتوافقة مع WCAG 2.2 باستخدام :focus-visible، وتجنب استخدام اللون باعتباره ناقل المعلومات الوحيد، ودعم وضع forced-colors، واستخدام وحدات نسبية للطباعة للامتثال لمتطلبات تغيير الحجم. وتضمن الأدوات الآلية إلى جانب اختبار لوحة المفاتيح اليدوي تغطية شاملة.