פיתוח דוח תאימות WCAG
הדרישות החוקיות לנגישות אתרים הולכות ומחמירות. ללא דוח תאימות WCAG רשמי, לא תוכלו להשתתף במכרזים ממשלתיים, לקבל הסמכת ESG, או להימנע מתביעות מצד משתמשים עם מוגבלויות. תרחיש אופייני: חברה מוציאה מיליונים על פיתוח אך מפסידה במכרז בגלל היעדר טקסט alt או יחס ניגודיות של 2.7:1. בינתיים, מפתחים רבים מאמינים שבדיקות אוטומטיות מספיקות, אך Axe-core מוצא רק כשליש מההפרות הקריטיות. בדיקות ידניות חושפות 60% יותר הפרות קריטיות מאשר כלים אוטומטיים, מה שהופך אותן ליעילות פי 2. המהנדסים שלנו, עם ניסיון של 10+ שנים בביקורת נגישות, יכינו מסמך שיתקבל על ידי כל גוף פיקוח תוך 5–8 ימי עסקים. פתרון מלא: מבדיקות ועד דוח סופי עם תוכנית תיקון.
מדוע ביקורות WCAG הן חובה במכרזים ממשלתיים
באירופה, בארה"ב ובאוסטרליה, חוסר נגישות עלול לגרור קנסות של עד 10% מהמחזור השנתי. דחיית ביקורת עלולה להוביל לעלויות גדולות פי כמה ממחיר הדוח עצמו. דוח WCAG הוא הוכחה לתאימות. יתרה מכך, קונים מסחריים רבים דורשים תעודת נגישות כתנאי למכרז. השקיעו $1,200 בביקורת WCAG כדי להימנע מקנסות פוטנציאליים של עד 10% מהמחזור השנתי—עבור חברה עם מחזור של $1M, מדובר בחיסכון של $100,000. הביקורת שלנו עולה $1,200, בעוד קנס יכול להגיע ל-$100,000. חיסכון פוטנציאלי: $100,000.
בעיות שביקורות נגישות פותרות
- סיכונים משפטיים: קנסות ותביעות הם מציאות. ביקורת מפחיתה את הסבירות שלהם.
- שגיאות סימון N+1: תמונות ללא alt, היררכיית כותרות לא תקינה, תוויות שדות חסרות. Axe-core מוצא חלק אך לא את כולם. אוטומציה מכסה 30–40% מהקריטריונים; בדיקות ידניות מכסות עוד 60%.
- בעיות בקרה: ניגודיות טקסט 2.7:1 לעומת מינימום 4.5:1, חלונות מודאליים ללא לכידת פוקוס, אזורי live חסרים לתוכן דינמי.
אנחנו לא רק מפרטים הפרות — אנו מספקים פתרונות ספציפיים עם הפניות לקבצים ולוחות זמנים.
כיצד בדיקות ידניות משלימות אוטומציה
כלים אוטומטיים מזהים רק כשליש מההפרות הקריטיות; בדיקות ידניות יעילות פי שניים במציאת שגיאות חמורות כמו מלכודות מקלדת. רשימת הבדיקות שלנו כוללת ניווט מקלדת (Tab, פוקוס, מודאלים), תאימות לקוראי מסך (NVDA, VoiceOver), ובדיקות ניגודיות/קנה מידה. בדיקות ידניות טובות פי 2.5 מכלים אוטומטיים בזיהוי מלכודות מקלדת.
כיצד אנו מבצעים את הביקורת
טכנולוגיות: Axe-core 4.x דרך Playwright, בדיקות ידניות עם NVDA (Firefox), VoiceOver (Safari), ניווט מקלדת. אנו מבצעים ביקורת axe-core כחלק משירות ביקורת הנגישות המקיף שלנו לאתרים.
// scripts/wcag-report-generator.js
const AxeBuilder = require('@axe-core/playwright').default;
const { chromium } = require('@playwright/test');
const fs = require('fs');
const PAGES = [
{ url: 'https://example.com', name: 'Главная страница' },
{ url: 'https://example.com/catalog', name: 'Каталог' },
{ url: 'https://example.com/login', name: 'Вход в систему' },
{ url: 'https://example.com/checkout', name: 'Оформление заказа' },
];
// Маппинг axe rule ID → WCAG критерии
const RULE_TO_WCAG = {
'color-contrast': '1.4.3 (Level AA)',
'image-alt': '1.1.1 (Level A)',
'label': '1.3.1, 4.1.2 (Level A)',
'button-name': '4.1.2 (Level A)',
'link-name': '2.4.4 (Level A)',
'heading-order': '1.3.1 (Level A)',
'duplicate-id': '4.1.1 (Level A)',
'html-has-lang': '3.1.1 (Level A)',
'keyboard': '2.1.1 (Level A)',
'focus-visible': '2.4.7 (Level AA)',
};
async function generateReport() {
const browser = await chromium.launch();
const allViolations = [];
const pageSummaries = [];
for (const pageConfig of PAGES) {
const page = await browser.newPage();
await page.goto(pageConfig.url, { waitUntil: 'networkidle' });
const results = await new AxeBuilder({ page })
.withTags(['wcag2a', 'wcag2aa', 'wcag21aa'])
.analyze();
const violations = results.violations.map(v => ({
rule: v.id,
wcag: RULE_TO_WCAG[v.id] || 'See axe docs',
impact: v.impact,
count: v.nodes.length,
description: v.description,
help_url: v.helpUrl,
elements: v.nodes.slice(0, 3).map(n => n.target[0]),
}));
pageSummaries.push({
name: pageConfig.name,
url: pageConfig.url,
total: violations.length,
critical: violations.filter(v => v.impact === 'critical').length,
serious: violations.filter(v => v.impact === 'serious').length,
violations,
});
allViolations.push(...violations);
await page.close();
}
await browser.close();
const report = {
generated_at: new Date().toISOString(),
standard: 'WCAG 2.1 Level AA',
tool: 'axe-core 4.x via Playwright',
pages_tested: PAGES.length,
total_violations: allViolations.length,
by_impact: {
critical: allViolations.filter(v => v.impact === 'critical').length,
serious: allViolations.filter(v => v.impact === 'serious').length,
moderate: allViolations.filter(v => v.impact === 'moderate').length,
minor: allViolations.filter(v => v.impact === 'minor').length,
},
pages: pageSummaries,
};
fs.writeFileSync('wcag-report.json', JSON.stringify(report, null, 2));
console.log('Отчёт сохранён: wcag-report.json');
return report;
}
generateReport();
הסקריפט בודק אוטומטית דפים שצוינו עם Axe-core, ממפה כללים לקריטריוני WCAG, ומוציא דוח JSON. לאחר מכן אנו בודקים ידנית מה שאוטומציה לא יכולה: מלכודות מקלדת, סדר פוקוס, תפקוד קורא מסך.
מה כולל הדוח
| פרק | תיאור |
|---|---|
| מתודולוגיה | כלים בשימוש, גרסאות, קריטריונים שנבדקו |
| עקרונות POUR | סיכום של Perceivable, Operable, Understandable, Robust |
| תוצאות מפורטות | רשימת הפרות לפי דף עם כלל, השפעה, מספר אלמנטים |
| תוכנית תיקון | עדיפות, מועדים, אחראים, פתרונות ספציפיים |
| המלצות | שיטות מומלצות לשמירה על נגישות |
| סיכום מנהלים | מדדים כמותיים לפי חומרה ותאימות לתקן |
רשימת בדיקות ידניות
אוטומציה מכסה כ-40% מהקריטריונים. השאר נבדקים ידנית:
- ניווט מקלדת: כל האלמנטים האינטראקטיביים נגישים דרך Tab, סדר פוקוס הגיוני, חלונות מודאליים לוכדים פוקוס, Escape סוגר.
- קוראי מסך: NVDA + Firefox (טפסים, טבלאות, מודאלים), VoiceOver + Safari (מחוות נייד), אזורי live לתוכן דינמי.
- ניגודיות וקנה מידה: טקסט עומד ב-4.5:1 (רגיל) ו-3:1 (גדול), זום 400% ללא גלילה, מצב ניגודיות גבוהה של Windows.
הפרות נפוצות (לחצו להרחבה)
| קריטריון WCAG | בעיה | פתרון |
|---|---|---|
| 1.1.1 (A) | תמונות ללא alt | הוסיפו // scripts/wcag-report-generator.js const AxeBuilder = require('@axe-core/playwright').default; const { chromium } = require('@playwright/test'); const fs = require('fs'); const PAGES = [ { url: 'https://example.com', name: 'Главная страница' }, { url: 'https://example.com/catalog', name: 'Каталог' }, { url: 'https://example.com/login', name: 'Вход в систему' }, { url: 'https://example.com/checkout', name: 'Оформление заказа' }, ]; // Маппинг axe rule ID → WCAG критерии const RULE_TO_WCAG = { 'color-contrast': '1.4.3 (Level AA)', 'image-alt': '1.1.1 (Level A)', 'label': '1.3.1, 4.1.2 (Level A)', 'button-name': '4.1.2 (Level A)', 'link-name': '2.4.4 (Level A)', 'heading-order': '1.3.1 (Level A)', 'duplicate-id': '4.1.1 (Level A)', 'html-has-lang': '3.1.1 (Level A)', 'keyboard': '2.1.1 (Level A)', 'focus-visible': '2.4.7 (Level AA)', }; async function generateReport() { const browser = await chromium.launch(); const allViolations = []; const pageSummaries = []; for (const pageConfig of PAGES) { const page = await browser.newPage(); await page.goto(pageConfig.url, { waitUntil: 'networkidle' }); const results = await new AxeBuilder({ page }) .withTags(['wcag2a', 'wcag2aa', 'wcag21aa']) .analyze(); const violations = results.violations.map(v => ({ rule: v.id, wcag: RULE_TO_WCAG[v.id] || 'See axe docs', impact: v.impact, count: v.nodes.length, description: v.description, help_url: v.helpUrl, elements: v.nodes.slice(0, 3).map(n => n.target[0]), })); pageSummaries.push({ name: pageConfig.name, url: pageConfig.url, total: violations.length, critical: violations.filter(v => v.impact === 'critical').length, serious: violations.filter(v => v.impact === 'serious').length, violations, }); allViolations.push(...violations); await page.close(); } await browser.close(); const report = { generated_at: new Date().toISOString(), standard: 'WCAG 2.1 Level AA', tool: 'axe-core 4.x via Playwright', pages_tested: PAGES.length, total_violations: allViolations.length, by_impact: { critical: allViolations.filter(v => v.impact === 'critical').length, serious: allViolations.filter(v => v.impact === 'serious').length, moderate: allViolations.filter(v => v.impact === 'moderate').length, minor: allViolations.filter(v => v.impact === 'minor').length, }, pages: pageSummaries, }; fs.writeFileSync('wcag-report.json', JSON.stringify(report, null, 2)); console.log('Отчёт сохранён: wcag-report.json'); return report; } generateReport(); לתמונות דקורטיביות, alt משמעותי לתמונות אינפורמטיביות |
| 1.4.3 (AA) | ניגודיות 2.7:1 | שנו צבע ל-#6b7280 (4.6:1) |
| 2.1.1 (A) | מלכודת מקלדת | הוסיפו מטפלי focus ו-blur |
תהליך העבודה
- ניתוח: חקר מבנה האתר, קביעת דפים לביקורת.
- בדיקות אוטומטיות: הרצת Axe-core על כל כתובות ה-URL שנבחרו, איסוף לוג JSON.
- בדיקות ידניות: מקלדת, קוראי מסך, ניגודיות — תיעוד הפרות לא ברורות.
- הרכבת דוח: יצירת מסמך עם טבלאות, דיאגרמות, תוכנית תיקון.
- בדיקה סופית ומסירה: אימות תקינות הקריטריונים, שליחת PDF ו-Excel.
מה כלול
- תיעוד: דוח WCAG מפורט בפורמטי PDF ו-Excel
- תוכנית תיקון: פעולות מסודרות לפי עדיפות עם מועדים ואחראים
- גישה: נתוני ביקורת גולמיים בפורמט JSON
- תמיכה: שעת ייעוץ המשך ושבועיים של תמיכה בדוא"ל
- הדרכה אופציונלית: מפגש שיטות נגישות מומלצות לצוות שלכם
לוחות זמנים ועלות
לוחות זמנים: 5 עד 8 ימי עסקים בהתאם לגודל האתר (עד 10 דפים — 5 ימים, גדול יותר — עד 8 ימים). המחיר מתחיל ב-$1,200 עבור עד 10 דפים, הצעות מחיר מותאמות לאתרים גדולים יותר. שירות בדיקות ה-WCAG שלנו מבטיח כיסוי מלא. קבלו ייעוץ והצעה מסחרית תוך יום.
למה לבחור בנו
- מבקרים מוסמכים עם ניסיון של 10+ שנים, 50+ פרויקטים שהושלמו, אמון של 30+ לקוחות.
- אנו מבטיחים שהדוח יתקבל על ידי גופים ממשלתיים ומבקרים.
- כולל תוכנית תיקון מסודרת לפי עדיפות — אתם יודעים בדיוק מה לעשות הלאה.
- הדוח שלנו משמש גם כבסיס לדוחות VPAT והסמכת WCAG.
- דוח WCAG מתקבל במכרזים ממשלתיים בסבירות גבוהה פי 3 מהערכה עצמית.
- השירות שלנו מתקבל בסבירות גבוהה פי 3 מביקורות עצמיות.
הזמינו שירות ביקורת נגישות עוד היום — קבלו דוח מפורט עם תוכנית תיקון תוך 5–8 ימי עסקים.







