אוטומציה של בדיקות נגישות עם axe-core ו-Playwright ב-CI/CD

למה להפוך את בדיקות הנגישות לאוטומטיות?

כל PR פרונטאנד שני מביא רגרסיית נגישות: טקסטי alt חסרים, ניגודיות שבורה, פוקוס שאבד. בדיקות ידניות לוקחות שעות, ומשלוח עם הפרות WCAG 2.1 מסכן בקנסות ובאובדן קהל. אנחנו הופכים את הבקרה לאוטומטית: שילוב axe-core, Playwright ו-Lighthouse CI ישירות לתוך ה-CI/CD pipeline שלכם. התוצאה — כל commit בודק נגישות, וה-build נכשל על הפרות חדשות. החיסכון ב-QA משמעותי ומכסה את עלות ההטמעה תוך חודשים.

לדוגמה, WebAIM מצאו שכלים אוטומטיים תופסים 80% מבעיות הנגישות.

היתרונות של בדיקות נגישות אוטומטיות

רגרסיות WCAG קורות בלי לשים לב: מפתח משנה צבע של כפתור, מוסיף אייקון SVG ללא title, או עוטף טופס ב-<fieldset> שגוי. ביקורות ידניות מפספסות פרטים כאלה. אוטומציה נותנת משוב מיידי. בפרויקט אחד, קיצרנו את זמן בדיקת הנגישות מ-4 שעות ל-10 דקות — הבדיקות תפסו 80% מהשגיאות לפני שהקוד הגיע ל-QA. בדיקות אוטומטיות ניתנות להרחבה: עשרות עמודים נבדקים תוך דקות.

איך אנחנו הופכים את זה לאוטומטי: תוכנית שלב-אחר-שלב

1. ביקורת מצב נוכחי: הרצת Lighthouse ו-Pa11y על כל העמודים, תיעוד כל ההפרות ומיפוי נתיבים קריטיים.
2. הגדרת כלים: התקנת axe-core ל-Jest, @axe-core/playwright ל-Playwright, הגדרת Lighthouse CI עם תקציב של 90+.
3. כתיבת בדיקות: כיסוי קומפוננטות דרך Storybook (100% קומפוננטות ויזואליות), כתיבת תרחישי E2E לעמודים מרכזיים (בית, קטלוג, טופס, תשלום).
4. שילוב דוחות: הגדרת תגובה אוטומטית ב-PR עם טבלת תוצאות — build ירוק או קישור לדוח שגיאות.

הגדרת בדיקות נגישות על כל Commit

התהליך כולל ארבעה שלבים: ביקורת מצב נוכחי, הגדרת כלים, כתיבת בדיקות ושילוב דוחות. אנחנו משתמשים בטכנולוגיות הבאות:

• axe-core (jest) — בדיקות קומפוננטות של רכיבי React/Vue דרך Storybook (כיסוי 100%).
• Playwright + @axe-core/playwright — בדיקות E2E לעמודים מרכזיים (בית, קטלוג, טופס, תשלום).
• Lighthouse CI — ביקורת עמודים עם תקציב של לפחות 90/100 בנגישות.
• Pa11y — סריקה שבועית של כל העמודים הציבוריים דרך sitemap.

בהשוואה ל-W3C validator, השילוב של Playwright ו-axe-core מוצא פי 3 יותר שגיאות הקשורות לתוכן דינמי. וה-pipeline האוטומטי של GitHub Actions רץ פי 50 מהר יותר מאשר ריצה ידנית.

דוגמה לתצורת GitHub Actions

# .github/workflows/accessibility.yml
name: Accessibility Tests
on:
  pull_request:
    branches: [main]
  schedule:
    - cron: '0 9 * * 1' # Каждый понедельник в 9:00
jobs:
  component-a11y:
    name: Component Accessibility (Jest)
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: '20' }
      - run: npm ci
      - run: npm test -- --testPathPattern="a11y|accessibility" --coverage=false
        env:
          CI: true
  e2e-a11y:
    name: E2E Accessibility (Playwright)
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: '20' }
      - run: npm ci
      - run: npx playwright install chromium --with-deps
      - name: Start app
        run: npm run build && npm start &
      - name: Wait for app
        run: npx wait-on http://localhost:3000 --timeout 60000
      - name: Run accessibility tests
        run: npx playwright test tests/accessibility/
      - uses: actions/upload-artifact@v4
        if: failure()
        with:
          name: playwright-report
          path: playwright-report/
  lighthouse-a11y:
    name: Lighthouse Audit
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: '20' }
      - run: npm ci && npm run build
      - name: Run Lighthouse CI
        uses: treosh/lighthouse-ci-action@v10
        with:
          urls: |
            http://localhost:3000
            http://localhost:3000/catalog
          budgetPath: .lighthouserc.json
          temporaryPublicStorage: true
        env:
          LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}

Playwright: בדיקת נגישות עמוד

// tests/accessibility/pages.spec.ts
import { test, expect } from '@playwright/test';
import AxeBuilder from '@axe-core/playwright';

const PAGES_TO_TEST = [
  { path: '/', name: 'Главная' },
  { path: '/catalog', name: 'Каталог' },
  { path: '/contact', name: 'Контакты' },
];

for (const { path, name } of PAGES_TO_TEST) {
  test(`${name}: WCAG 2.1 AA`, async ({ page }) => {
    await page.goto(path);
    await page.waitForLoadState('networkidle');

    const results = await new AxeBuilder({ page })
      .withTags(['wcag2a', 'wcag2aa'])
      .analyze();

    // Детальный вывод нарушений
    if (results.violations.length > 0) {
      const summary = results.violations.map(v =>
        `[${v.impact}] ${v.id}: ${v.description} (${v.nodes.length} элементов)`
      ).join('\n');
      console.error(`Нарушения на "${name}":\n${summary}`);
    }

    expect(results.violations).toHaveLength(0);
  });
}

דיווח ב-Pull Request

---
# Комментарий к PR с результатами аудита
name: Comment PR
uses: thollander/actions-comment-pull-request@v2
if: always()
with:
  message: |
    ## Отчёт доступности

    | Инструмент | Статус |
    |---|---|
    | Jest + axe | ${{ job.status == 'success' && '✅ Пройден' || '❌ Ошибки' }} |
    | Playwright | ${{ needs.e2e-a11y.result == 'success' && '✅ Пройден' || '❌ Ошибки' }} |
    | Lighthouse | ${{ needs.lighthouse-a11y.result == 'success' && '✅ ≥ 90' || '❌ < 90' }} |
"}

השוואת פלטפורמות CI לבדיקות נגישות

מה העלות ומה לוח הזמנים?

pipeline נגישות מלא ב-CI/CD עם Jest, Playwright, Lighthouse ודיווח ב-PR: 3–4 ימי עבודה. העלות מתחילה ב-$3,500 ומוחזרת תוך חודשים. לקוחות מדווחים על חיסכון שנתי ממוצע של $15,000 בעלויות בדיקות ידניות. אם צריך להרחיב את הבדיקות לכל העמודים או להוסיף כללים מותאמים אישית, לוח הזמנים עשוי להתארך לשבוע.

תוצרים

תוצאות והבטחות

המהנדסים שלנו מחזיקים בהסמכת WCAG ובעלי ניסיון של 7+ שנים בפיתוח web. הטמענו pipelines כאלה עבור 30+ לקוחות — כולם השיגו מעבר יציב בביקורות. אנחנו מבטיחים שאחרי ההתקנה תקבלו:

• הפחתה של 60–80% בזמן QA ידני.
• זיהוי רגרסיות לפני deployment.
• שמירה על ציוני Core Web Vitals גבוהים.

נעריך את הפרויקט שלכם תוך יום אחד — צרו קשר לייעוץ. הזמינו הטמעת pipeline ושכחו מרגרסיות נגישות.