אוטומציה של בדיקות נגישות עם Pa11y

נתקלים בבעיות נגישות? הפכו את בדיקות הנגישות לאוטומטיות עם Pa11y

השקעתם שבועות בעיצוב, אבל לקוח שמשתמש בקורא מסך לא יכול לראות את כפתור 'קנייה'. או גרוע מכך—קיבלתם תלונה מרשות רגולטורית על אי-עמידה בתקן WCAG 2.1. בדיקה ידנית של 500 עמודים פירושה ימים של עבודת QA. Pa11y פותר את זה: הוא רץ ב-CLI, קורא את sitemap.xml, ומפיק דוח עבור כל העמודים במעבר אחד. אנחנו משתמשים ב-Pa11y ב-CI/CD כבר למעלה מ-5 שנים ביותר מ-50 פרויקטים—ומשתפים מניסיוננו. אוטומציה של בדיקות נגישות לאתר עם Pa11y מקצרת את זמן הבדיקה ב-70%, ועלויות התחזוקה יורדות בזכות גילוי מוקדם של באגים. ראו את החיסכון: בפרויקט של 2000 עמודים, קיצרנו את הבדיקה מ-3 ימים לשעתיים ומצאנו 47 שגיאות קריטיות שה-QA פספס, וחסכנו כ-$5,000 בזמן QA.

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

ללא אוטומציה, תפספסו 30–50% מההפרות. Pa11y בודק ניגודיות צבעים, טקסטים חלופיים (alt), מאפייני ARIA, ניווט מקלדת. אנחנו מגדירים אותו כך שלעולם לא יפספס שגיאות קריטיות תוך התעלמות מתוצאות חיוביות שגויות (למשל, ניגודיות באלמנטים מושבתים). בעיות טיפוסיות: תמונות ללא alt, תפקידי ARIA שגויים, ניגודיות טקסט נמוכה. בדיקות נגישות אוטומטיות עם Pa11y לעמידה ב-WCAG 2.1 מפחיתות עלויות בדיקה ומאיצות שחרורים.

איך לשלב את Pa11y ב-CI/CD?

ההתקנה אורכת 1–2 ימים וכוללת חמישה שלבים:

1. ניתוח—איסוף כתובות URL מ-sitemap.xml, הגדרת התקן (בדרך כלל WCAG 2.1 AA).
2. קונפיגורציה—יצירת .pa11yci.json עם הפרמטרים וההחרגות הנדרשים.
3. אינטגרציה—הוספת פקודת pa11y-ci ל-pipeline שלכם (GitLab CI, GitHub Actions, Jenkins).
4. בדיקה—הרצת בדיקת ניסיון, התאמת תוצאות חיוביות שגויות.
5. תיעוד—תיעוד זרימת העבודה לצוות.

ניתוח וקונפיגורציה

התהליך מתחיל בניתוח האתר שלכם: איסוף כתובות URL מ-sitemap.xml וכו'. הגדירו את התקן (בדרך כלל WCAG2AA), timeouts, והחרגות. פלט: .pa11yci.json:

// .pa11yci.json
{
  "defaults": {
    "standard": "WCAG2AA",
    "timeout": 30000,
    "wait": 1000,
    "ignore": [
      "WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail"
    ],
    "chromeLaunchConfig": {
      "args": ["--no-sandbox", "--disable-setuid-sandbox"]
    }
  },
  "urls": [
    "https://example.com",
    "https://example.com/about",
    "https://example.com/contact",
    {
      "url": "https://example.com/login",
      "actions": [
        "wait for element #login-form to be visible"
      ]
    }
  ]
}

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

הוסיפו שלב ב-CI: ב-GitLab—// .pa11yci.json { "defaults": { "standard": "WCAG2AA", "timeout": 30000, "wait": 1000, "ignore": [ "WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail" ], "chromeLaunchConfig": { "args": ["--no-sandbox", "--disable-setuid-sandbox"] } }, "urls": [ "https://example.com", "https://example.com/about", "https://example.com/contact", { "url": "https://example.com/login", "actions": [ "wait for element #login-form to be visible" ] } ] } , ב-GitHub Actions—באופן דומה. הפרמטר pa11y-ci --config .pa11yci.json --threshold 5 מגדיר את מספר השגיאות המותר. מצב קפדני (--threshold) אומר שה-pipeline נכשל על כל שגיאה.

קריאה מ-sitemap.xml

pa11y-ci --sitemap https://example.com/sitemap.xml \
  --sitemap-find "https://example.com" \
  --sitemap-replace "http://localhost:3000" \
  --threshold 0

איך להתעלם מתוצאות חיוביות שגויות?

Pa11y לפעמים מתלונן על ניגודיות באלמנטים מושבתים או תפקידי ARIA שנקבעו על ידי הפריימוורק. אנחנו מוסיפים רשימת --threshold 0 בקונפיגורציה—מותאמת לערכת ה-UI שלכם. לדוגמה:

"ignore": [
  "WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail",
  "WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.InputSearch.Name"
]

זה מבטל עד 90% מהתוצאות החיוביות השגויות מבלי לאבד בדיקות קריטיות.

השוואה: Pa11y לעומת axe-core

Pa11y מנצח כשצריך לסרוק את כל האתר. Axe עדיף בבדיקות יחידה. אנחנו משלבים אותם: Pa11y לבדיקות ליליות, axe ב-pre-commit hooks. זה נותן כיסוי מלא ללא כפילויות. בהשוואה לבדיקה ידנית, Pa11y מהיר פי 3 ומפחית עלויות ב-70%.

// scripts/a11y-audit.js
const pa11y = require('pa11y');
const fs = require('fs');

const PAGES = [
  { url: 'http://localhost:3000', name: 'Главная' },
  { url: 'http://localhost:3000/catalog', name: 'Каталог' },
  { url: 'http://localhost:3000/checkout', name: 'Оформление заказа' },
];

async function audit() {
  const results = [];
  for (const page of PAGES) {
    console.log(`Checking: ${page.name}`);
    const result = await pa11y(page.url, {
      standard: 'WCAG2AA',
      timeout: 20000,
      actions: page.actions || [],
    });
    results.push({
      name: page.name,
      url: page.url,
      issues: result.issues.length,
      critical: result.issues.filter(i => i.type === 'error').length,
      warnings: result.issues.filter(i => i.type === 'warning').length,
      violations: result.issues,
    });
  }
  fs.writeFileSync('a11y-report.json', JSON.stringify(results, null, 2));
  console.table(results.map(r => ({
    Страница: r.name,
    Ошибки: r.critical,
    Предупреждения: r.warnings,
  })));
  if (results.some(r => r.critical > 0)) {
    process.exit(1);
  }
}

audit();

מה אתם מקבלים

לאחר התקנת Pa11y, תקבלו:

• קובץ קונפיגורציה pa11y-ci --sitemap https://example.com/sitemap.xml \ --sitemap-find "https://example.com" \ --sitemap-replace "http://localhost:3000" \ --threshold 0 עובד המותאם לפרויקט שלכם.
• אינטגרציה עם CI/CD—בדיקה אוטומטית בכל push.
• רשימת התעלמות מותאמת לתוצאות חיוביות שגויות.
• תיעוד על פירוש דוחות ותיקון שגיאות נפוצות.
• הדרכת צוות: איך לקרוא דוחות Pa11y ולתקן באגי נגישות.

שלבי התקנת Pa11y

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

התקנה בסיסית אורכת 1–2 ימים. התקנה מורחבת עם חוקים מותאמים, צילומי מסך והדרכה—עד 5 ימים. העלות מחושבת באופן אישי לפי גודל האתר; השקעה טיפוסית היא $2,000–$5,000. תקופת החזר ההשקעה היא פחות מ-3 חודשים. נבצע הערכה של הפרויקט שלכם בשעה אחת—צרו קשר.

בהתאם להנחיות WCAG 2.1, Pa11y מפעיל דפדפן headless (Chrome), טוען כל עמוד, ובודק אותו מול תקן ה-WCAG שנבחר. התוצאות מקובצות לפי סוג שגיאה: error (קריטי), warning (אזהרה), notice (מידע). זה מאפשר זיהוי מהיר של אזורי בעיה ותיעדוף תיקונים.

איך להתחיל?

צרו קשר לייעוץ. הזמינו בדיקת נגישות, ואם תקבלו קנס על אי-עמידה ב-WCAG לאחר הבדיקה שלנו, נבדוק שוב בחינם. ערבות זו מבטיחה שקט נפשי. לצוות שלנו ניסיון של למעלה מ-5 שנים ועזרנו ל-50+ חברות להשיג עמידה בתקן. ההשקעה באוטומציה מחזירה את עצמה תוך 2-3 חודשים. קבלו את קונפיגורציית Pa11y שלכם וחסלו בדיקות ידניות לנצח.