أتمتة فحص إمكانية الوصول في الـ CI: امنع كسر موقعك لذوي الإعاقة قبل الدمج

name: a11y
on: [pull_request]
jobs:
  pa11y:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npm run build && npm run start &
      - run: npx wait-on http://localhost:3000
      - run: npx pa11y-ci

النتيجة المتوقعة: على كل PR، لو ظهر نص من غير alt أو تباين ضعيف، الـ check بيطلع أحمر و pa11y-ci بيرجّع exit 2، فالدمج بيتوقف تلقائيًا.

مثال واقعي بالأرقام

الافتراض إن عندك متجر إلكتروني بـ 28 ألف زيارة/يوم، وفريق بيدمج 15–20 PR في الأسبوع. مطوّر غيّر لون زرار "أضف للسلة" لرمادي فاتح على خلفية بيضا، فنزل التباين لـ 2.1:1 بدل الحد الأدنى المطلوب 4.5:1. من غير فحص، الزرار فضل شهر كامل صعب القراءة على ضعاف البصر، وبتخسر مبيعات وانت مش عارف السبب. مع pa11y-ci، الـ PR ده كان هيترفض في حوالي 40 ثانية قبل ما يوصل الإنتاج أصلاً.

الـ trade-off وما يجب الانتباه له

ركز في نقطة مهمة: الأدوات الآلية مش بتمسك كل حاجة. pa11y و axe-core بيكتشفوا تقريبًا 30–40% فقط من مشاكل WCAG، يعني الحاجات اللي تتقاس آليًا زي التباين ووجود الـ alt. الباقي — زي إن ترتيب القراءة منطقي، أو إن الوصف البديل مفيد فعلاً مش مجرد كلمة — محتاج مراجعة بشرية بقارئ شاشة. بتكسب: شبكة أمان رخيصة توقف الأخطاء الواضحة تلقائيًا. بتخسر: دقيقة لدقيقتين زيادة في كل CI run، واحتمال "إيجابيات كاذبة" ساعات تحتاج ضبط بسيط.

متى لا تستخدم هذه الطريقة

لو موقعك صفحة هبوط ثابتة صغيرة بتتعدّل مرة كل كام شهر، فحص يدوي مرة واحدة يكفي، وإضافة CI هنا هندسة زيادة. وكمان لو مفيش عندك CI أصلاً، ابدأ بتشغيل npx pa11y http://your-url محليًا الأول، وبعدها انقلها للأتمتة لما يكون عندك خط CI فعلي.

الخطوة التالية

افتح موقعك المحلي وشغّل الأمر ده مرة واحدة: npx pa11y http://localhost:3000. عدّ الأخطاء اللي طلعت. لو الرقم أكبر من صفر، عندك شغل — والخطوة اللي بعدها إنك تحط ملف .pa11yci والـ workflow اللي فوق في الريبو، عشان الرقم ده ميزيدش تاني في أي PR جاي.

المصادر

• WebAIM Million 2024 Report — إحصائيات أخطاء WCAG على مليون صفحة: webaim.org/projects/million
• معايير WCAG 2.2 الرسمية من W3C: w3.org/TR/WCAG22
• توثيق pa11y-ci الرسمي: github.com/pa11y/pa11y-ci
• محرك axe-core من Deque Labs: github.com/dequelabs/axe-core
• الحد الأدنى للتباين اللوني 4.5:1 — WCAG معيار النجاح 1.4.3