Axe-core: אוטומציה של בדיקות WCAG 2.1 עם Jest ו-Playwright

Axe-core: אוטומציה של בדיקות WCAG 2.1 עם Jest ו-Playwright

לעתים קרובות, בעיות נגישות (a11y) מתגלות רק במהלך בדיקות ידניות או, גרוע מכך, בסביבת הייצור. כל באג קריטי שפספסנו – לדוגמה, חסר alt בתמונה או ניווט מקלדת שאינו פונקציונלי – יכול לעלות לנו במוניטין ובקנסות כבדים. אנו מבצעים אוטומציה של בדיקות WCAG 2.1/2.2 עם axe-core כדי לתפוס בעיות כאלה בשלב ה-CI/CD. ספריית Deque Systems מזהה אוטומטית כ-57% מההפרות, ומשאירה את השאר לבדיקה ידנית. הניסיון מראה שלאחר הטמעת axe-core, רגרסיות נגישות יורדות ב-70–80%.

כיצד axe-core מסייע באוטומציה של בדיקות נגישות

axe-core פועל גם בדפדפן וגם ב-Node.js, וניתן לשלבם בקלות במסגרות בדיקה קיימות. הכללים שלו מבוססים על WCAG 2.1, ומקובצים לפי תגיות (wcag2a, wcag2aa, wcag21aa). עבור כל רכיב בעמוד, הספרייה בודקת: ניגודיות, סמנטיקה של כותרות, נגישות טפסים, תכונות ARIA ועוד. התוצאה היא דוח מובנה עם סוג, רמת חומרה והפניה לרכיב.

אינטגרציה עם Jest + Testing Library

npm install --save-dev jest-axe @testing-library/react 

// __tests__/accessibility.test.tsx
import { render } from '@testing-library/react';
import { axe, toHaveNoViolations } from 'jest-axe';

expect.extend(toHaveNoViolations);

describe('Доступность компонентов', () => {
  it('Button не имеет нарушений', async () => {
    const { container } = render(<Button>Отправить</Button>);
    const results = await axe(container);
    expect(results).toHaveNoViolations();
  });

  it('Form не имеет нарушений', async () => {
    const { container } = render(
      <form>
        <label htmlFor="email">Email</label>
        <input id="email" type="email" />
        <button type="submit">Войти</button>
      </form>
    );
    const results = await axe(container, {
      rules: {
        'color-contrast': { enabled: true },
        'label': { enabled: true },
      },
    });
    expect(results).toHaveNoViolations();
  });
});

אינטגרציה עם Playwright

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

test('Главная страница проходит WCAG 2.1 AA', async ({ page }) => {
  await page.goto('/');
  const results = await new AxeBuilder({ page })
    .withTags(['wcag2a', 'wcag2aa', 'wcag21aa'])
    .exclude('.cookie-banner') // Исключаем компоненты третьих сторон
    .analyze();
  expect(results.violations).toEqual([]);
});

test('Форма регистрации — доступность', async ({ page }) => {
  await page.goto('/register');
  const results = await new AxeBuilder({ page })
    .include('#registration-form')
    .analyze();
  // Детальный отчёт при падении
  if (results.violations.length > 0) {
    console.table(results.violations.map(v => ({
      id: v.id,
      impact: v.impact,
      description: v.description,
      nodes: v.nodes.length,
    })));
  }
  expect(results.violations).toEqual([]);
});

מדוע לשלב את axe-core ב-CI/CD?

בדיקות נגישות ידניות קשה להרחיב: בדיקת עמוד בודד אורכת 2–3 שעות. שילוב axe-core ב-CI/CD (לדוגמה, באמצעות בדיקת Playwright לפני כל פריסה) הופך את הבדיקה הזו לאוטומטית. אנו מבטיחים שהפרות קריטיות לא יגיעו לסביבת הייצור. בפרויקט אחד עם 500+ עמודים, לאחר הגדרת axe-core, רגרסיות נגישות ירדו מ-30 ל-2–3 בחודש.

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

רמות חומרה והשפעתן

מאיפה להתחיל: טעויות נפוצות בהגדרת axe-core

בהרצה הראשונה, axe-core מייצר לעתים קרובות תוצאות חיוביות שגויות על iframes של צד שלישי, באנרים של עוגיות או תוכן שנטען דינמית. כדי למנוע רעש, הגדירו חריגים באמצעות npm install --save-dev jest-axe @testing-library/react וציינו תגיות בדיקה מדויקות (לדוגמה, // __tests__/accessibility.test.tsx import { render } from '@testing-library/react'; import { axe, toHaveNoViolations } from 'jest-axe'; expect.extend(toHaveNoViolations); describe('Доступность компонентов', () => { it('Button не имеет нарушений', async () => { const { container } = render(<Button>Отправить</Button>); const results = await axe(container); expect(results).toHaveNoViolations(); }); it('Form не имеет нарушений', async () => { const { container } = render( <form> <label htmlFor="email">Email</label> <input id="email" type="email" /> <button type="submit">Войти</button> </form> ); const results = await axe(container, { rules: { 'color-contrast': { enabled: true }, 'label': { enabled: true }, }, }); expect(results).toHaveNoViolations(); }); }); ). כמו כן, חשוב להגדיר נכון את הכללים: השביתו את אלה שאינם רלוונטיים לפרויקט (לדוגמה, // tests/accessibility.spec.ts import { test, expect } from '@playwright/test'; import AxeBuilder from '@axe-core/playwright'; test('Главная страница проходит WCAG 2.1 AA', async ({ page }) => { await page.goto('/'); const results = await new AxeBuilder({ page }) .withTags(['wcag2a', 'wcag2aa', 'wcag21aa']) .exclude('.cookie-banner') // Исключаем компоненты третьих сторон .analyze(); expect(results.violations).toEqual([]); }); test('Форма регистрации — доступность', async ({ page }) => { await page.goto('/register'); const results = await new AxeBuilder({ page }) .include('#registration-form') .analyze(); // Детальный отчёт при падении if (results.violations.length > 0) { console.table(results.violations.map(v => ({ id: v.id, impact: v.impact, description: v.description, nodes: v.nodes.length, }))); } expect(results.violations).toEqual([]); }); עבור רכיבים עם צבעים מותאמים אישית).

רשימת בדיקה להטמעת axe-core

• החריגו iframes וווידג'טים של צד שלישי.
• הגדירו כללים מותאמים אישית לרכיבים ספציפיים.
• שלבו עם Jest לבדיקות יחידה של רכיבים.
• שלבו עם Playwright לבדיקות e2e של עמודים קריטיים.
• הוסיפו ריצה ל-CI/CD (GitHub Actions, GitLab CI).
• הגדירו התראות על כשלים.

מה כלול בעבודה

• תיעוד: דוח של הפרות נוכחיות, רשימת כללים, חריגים לרכיבי צד שלישי.
• אינטגרציה: הגדרת axe-core ב-Jest (בדיקות יחידה לרכיבים), Playwright (בדיקות e2e לעמודים) ו-Storybook (בדיקה ויזואלית) – לפי הצורך.
• צינור CI/CD: הוספת בדיקות נגישות ל-GitLab CI, GitHub Actions או דומה.
• הכשרת צוות: הרצאה בסיסית (1–2 שעות) על WCAG ועבודה עם axe-core.
• תמיכה: ייעוץ לתיקון הפרות שזוהו במשך חודש לאחר ההטמעה.

לוחות זמנים

הגדרת axe-core ב-Jest + Playwright, כיסוי עמודים ורכיבים מרכזיים: 2–3 ימי עסקים. אם הפרויקט משתמש במסגרות לא סטנדרטיות (Angular, Vue 3 עם SSR) או דורש התאמה עמוקה של כללים, לוח הזמנים עשוי להתארך ל-5 ימים. אנו עובדים עם מקדמה של 50%; העלות הסופית מחושבת באופן אישי לאחר בדיקת הקוד שלכם.

לצוות שלנו ניסיון של 5+ שנים בבדיקות נגישות ויותר מ-50 פרויקטים מוצלחים. צרו קשר לייעוץ על שילוב axe-core בפרויקט שלכם. הזמינו בדיקת נגישות – זה יפחית סיכונים ויחסוך זמן.