في معظم مراجعات إمكانية الوصول (Accessibility Audits)، تتكرر نفس الأخطاء البرمجية مرارًا وتكرارًا. والمفاجأة أن معظمها لا يحتاج إلى أكثر من سطر أو سطرين من CSS لإصلاحه.

المشكلة ليست في المطورين، بل في أن كثيرًا من هذه الأنماط أصبحت ممارسات شائعة انتقلت من مشاريع قديمة لم تكن تراعي معايير الوصول الرقمي.

في هذا المقال نستعرض أكثر 5 أخطاء CSS شيوعًا التي تؤدي إلى فشل المواقع في اختبارات إمكانية الوصول، مع أمثلة عملية وأكواد الإصلاح، بالاعتماد على تقرير WebAIM Million 2024 ومعايير WCAG 2.2.

---

1. إزالة outline: none دون توفير بديل

يُعد إخفاء مؤشر التركيز (Focus Indicator) من أكثر الأخطاء انتشارًا وخطورة.

ووفقًا لتقرير WebAIM Million 2024، فإن ما يقارب 78٪ من المواقع تعاني من مشكلات مرتبطة بمؤشرات التركيز.

السبب غالبًا يكون أحد السطرين التاليين:

❌ الكود الخاطئ

* {
  outline: none;
}

/* أو */

button:focus {
  outline: 0;
}

هذا الكود يمنع مستخدمي لوحة المفاتيح من معرفة العنصر الحالي أثناء التنقل، مما يؤثر على الأشخاص ذوي الإعاقات الحركية ومستخدمي قارئات الشاشة.

✅ الكود الصحيح

button:focus-visible {
  outline: 3px solid #005FCC;
  outline-offset: 3px;
}

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

نصيحة: يجب أن يحقق لون مؤشر التركيز نسبة تباين لا تقل عن 3:1 مع الخلفية.

---

2. ضعف التباين اللوني

يُعتبر ضعف التباين أكثر أخطاء إمكانية الوصول انتشارًا، حيث يظهر في 83.6٪ من المواقع وفقًا لـ WebAIM 2024.

تنص معايير WCAG على ما يلي:

• 4.5:1 للنصوص العادية.
• 3:1 للنصوص الكبيرة.
• 3:1 لعناصر الواجهة مثل الأزرار والحقول والأيقونات.

❌ الكود الخاطئ

color: #AAAAAA;
background: #FFFFFF;

نسبة التباين: 2.32:1

✅ الكود الصحيح

color: #595959;
background: #FFFFFF;

نسبة التباين: 7.0:1

من أفضل الأدوات لاختبار التباين: axe DevTools و WebAIM Contrast Checker.

---

3. الاعتماد على اللون وحده لنقل المعلومة

إذا كان الخطأ يظهر باللون الأحمر فقط، أو النجاح باللون الأخضر فقط، فأنت تخالف معيار WCAG 1.4.1.

حوالي 8٪ من الرجال يعانون من أحد أنواع عمى الألوان، وقد لا يتمكنون من التمييز بين الأحمر والأخضر.

❌ الكود الخاطئ

.error {
    border-color: red;
}

✅ الكود الصحيح

.error {
    border-color: #CC0000;
    border-width: 2px;
}

.error::before {
    content: "⚠ خطأ: ";
    font-weight: bold;
}

استخدم دائمًا مؤشرًا إضافيًا مثل:

• أيقونة
• نص توضيحي
• زيادة سماكة الحدود
• نمط مختلف

ولا تعتمد على اللون وحده.

---

4. استخدام وحدات px بدلًا من rem

يشترط معيار WCAG 1.4.4 أن يتمكن المستخدم من تكبير النص حتى 200٪ دون فقدان المحتوى أو الوظائف.

استخدام px يجعل حجم الخط ثابتًا ولا يستجيب لإعدادات المستخدم.

❌ الكود الخاطئ

body {
    font-size: 14px;
}

h1 {
    font-size: 24px;
}

p {
    font-size: 16px;
}

✅ الكود الصحيح

html {
    font-size: 100%;
}

body {
    font-size: 1rem;
}

h1 {
    font-size: 1.5rem;
}

p {
    font-size: 1rem;
}

استخدام rem يجعل جميع الأحجام تستجيب تلقائيًا لإعدادات المستخدم داخل المتصفح.

---

5. تجاهل prefers-reduced-motion

ليست كل الحركات مناسبة لجميع المستخدمين.

التأثيرات الحركية المبالغ فيها قد تسبب دوارًا أو انزعاجًا أو حتى تحفز نوبات لدى بعض الأشخاص.

❌ الكود التقليدي

.card {
    transition: transform .4s ease;
}

.card:hover {
    transform: scale(1.05);
}

✅ الكود المتوافق مع WCAG

.card {
    transition: transform .4s ease;
}

.card:hover {
    transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {

    .card {
        transition: none;
    }

    .card:hover {
        transform: none;
    }

}

إذا اختار المستخدم خيار تقليل الحركة في نظام التشغيل، فمن حقه أن يحترم الموقع هذا التفضيل.

---

الخلاصة

إذا أردت اجتياز اختبارات إمكانية الوصول، فتأكد من مراجعة هذه النقاط دائمًا:

الخطأ	الحل
إزالة outline	استخدم :focus-visible مع تباين مناسب
ضعف التباين	4.5:1 للنصوص و3:1 لعناصر الواجهة
الاعتماد على اللون فقط	أضف رمزًا أو نصًا أو مؤشرًا بصريًا إضافيًا
استخدام px	استخدم rem مع html { font-size:100%; }
تجاهل prefers-reduced-motion	أضف Media Query لدعم تفضيلات المستخدم

---

اجعل الوصول الرقمي أسهل

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

---

المراجع

• WebAIM Million Report 2024
• W3C WCAG 2.2
• Sara Soueidan – Focus Indicators Guide