ביקורת נגישות אתר WCAG 2.1 AA ודוח

תרחיש טיפוסי: לאחר השקת אתר, 20% מהמשתמשים לא יכולים להשלים הזמנה בגלל טקסטים חסרים של alt ופוקוס שגוי. או שגוף רגולטורי דורש עמידה בתקן WCAG 2.1 AA. אנו מבצעים ביקורת נגישות: בדיקות אוטומטיות ומדניות, דוח מפורט ותוכנית תיקון.

WCAG 2.1 AA הוא תקן בינלאומי חובה עבור אתרים ממשלתיים באיחוד האירופי (EN 301 549) ובארה"ב (Section 508). רמה AA כוללת 50+ קריטריונים המכסים נתפסות, תפעוליות, הבנה ועמידות. הניסיון שלנו מראה: בדיקות ידניות מזהות פי שניים בעיות מאשר כלים אוטומטיים, ולכן אנו משתמשים בשתי הגישות.

סיבות לביקורת WCAG 2.1 AA

דרישות חוקיות אינן הסיבה היחידה. אתר נגיש מגיע לקהלים עם מוגבלויות (כ-15% מהאוכלוסייה). זה גם משפר SEO: מנועי חיפוש מתחשבים במבנה סמנטי ובטקסטים חלופיים. בנוסף, זה משמש כהוכחת עמידה בדרישות במהלך בדיקות.

בעיות שאנו פותרים

• ניגודיות טקסט לא מספקת (SC 1.4.3) – טקסט אפור על לבן לעיתים קרובות נופל מתחת ל-4.5:1, נפוץ בכפתורים ובטיפים.
• חסר label בתמונות – במיוחד בעמודי מוצר שבהם קוראי מסך לא יכולים להעביר מידע חזותי.
• רכיבי UI מותאמים אישית (selects, sliders) ללא תמיכת מקלדת ותכונות ARIA – לדוגמה, בורר תאריך ללא תווית ARIA או תפקיד שגוי.
• טפסים המשתמשים ב-placeholder במקום aria-expanded – קוראי מסך לא יכולים לזהות שדות, והטקסט נעלם בעת הקלדה.
• סדר פוקוס שאינו תואם לזרימה החזותית – משתמשים הולכים לאיבוד בעת ניווט עם Tab.

הנה מקרה אמיתי: בעמוד נחיתה של סטארטאפ פינטק, תפריט נפתח מותאם אישית לא פתח אפשרויות בעת שימוש במקשי מקלדת. הביקורת שלנו חשפה חסר במטפלי keydown ו-// axe DevTools — расширение Chrome/Firefox // Запустить на каждой странице: F12 → Accessibility // axe-core через Playwright npm install -D @axe-core/playwright // audit.spec.ts import { test, expect } from '@playwright/test'; import AxeBuilder from '@axe-core/playwright'; const pagesToAudit = [ '/', '/about', '/contact', '/login', '/dashboard' ]; for (const path of pagesToAudit) { test(`${path} has no WCAG 2.1 AA violations`, async ({ page }) => { await page.goto(`https://staging.example.com${path}`); const results = await new AxeBuilder({ page }) .withTags(['wcag2a', 'wcag2aa', 'wcag21aa']) .analyze(); expect(results.violations).toEqual([]); }); } . התיקון לקח שעתיים, אבל לפני כן 30% מהמשתמשים עם מוגבלויות מוטוריות לא יכלו לבחור תעריף.

תהליך הביקורת

1. סריקה אוטומטית באמצעות axe-core, WAVE ו-Pa11y.
2. בדיקות ידניות עם מקלדת וקורא מסך (NVDA, JAWS, VoiceOver).
3. הפקת דוח עם בעיות לפי עדיפות ודוגמאות קוד.
4. מסירת תוכנית תיקון עם הערכות מאמץ.
5. יישום תיקונים אופציונלי.

כלים אוטומטיים (מוצאים כ-30% מהבעיות)

אנו משתמשים ב-axe DevTools, Lighthouse ו-Pa11y. דוגמה לשילוב axe-core:

// axe DevTools — расширение Chrome/Firefox
// Запустить на каждой странице: F12 → Accessibility
// axe-core через Playwright
npm install -D @axe-core/playwright

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

const pagesToAudit = [
  '/',
  '/about',
  '/contact',
  '/login',
  '/dashboard'
];

for (const path of pagesToAudit) {
  test(`${path} has no WCAG 2.1 AA violations`, async ({ page }) => {
    await page.goto(`https://staging.example.com${path}`);
    const results = await new AxeBuilder({ page })
      .withTags(['wcag2a', 'wcag2aa', 'wcag21aa'])
      .analyze();
    expect(results.violations).toEqual([]);
  });
}

# WAVE https://wave.webaim.org/
# Pa11y pa11y --standard WCAG2AA https://example.com --reporter html > report.html
# Lighthouse lighthouse https://example.com --only-categories=accessibility --output html

בדיקות ידניות (60-70% מהבעיות)

• ניווט בכל זרימת המשתמש באמצעות מקלדת בלבד
• בדיקה עם NVDA + Chrome / JAWS + IE / VoiceOver + Safari
• בדיקה בזום של 200% ו-400% (SC 1.4.10 Reflow)
• בדיקה במצב ניגודיות גבוהה של Windows
• השבתת CSS – המבנה צריך להישאר משמעותי

התפקיד הבלתי ניתן להחלפה של בדיקות ידניות

אוטומציה מוצאת שגיאות תחביריות: חסר # WAVE https://wave.webaim.org/ # Pa11y pa11y --standard WCAG2AA https://example.com --reporter html > report.html # Lighthouse lighthouse https://example.com --only-categories=accessibility --output html , ניגודיות נמוכה, תפקידים חסרים. אבל היא לא יכולה להעריך אם סדר הטאבים הגיוני או אם שינויים דינמיים מוכרזים כראוי. לדוגמה, כשמודאל נפתח, קורא המסך צריך לשמוע את הכותרת שלו, ואחרי הסגירה, הפוקוס צריך לחזור לאלמנט שהפעיל אותו. רק בדיקה ידנית יכולה לאמת זאת.

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

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

מה כלול בביקורת

• דוח מלא המפרט כל הפרת WCAG 2.1 AA
• תיעדוף (קריטי, משמעותי, מינורי) עם הסבר על ההשפעה
• צילומי מסך ונתיבי HTML לאלמנטים בעייתיים
• המלצות לתיקון עם דוגמאות קוד
• תוכנית יישום עם הערכות מאמץ
• ייעוץ מקוון של שעה עם סיום
• יישום תיקונים אופציונלי (בעלות נוספת)

ממצאים טיפוסיים באתרים רוסיים

• חסר תכונת alt על אלמנט lang
• ניגודיות נמוכה של טקסט אפור על רקע לבן
• selects ותפריטים נפתחים מותאמים אישית ללא תמיכת מקלדת
• טפסים המשתמשים ב-placeholder במקום maximum-scale=1
• סליידרים וקרוסלות ללא כפתורי שליטה
• זום מושבת (maximum-scale=1)

כמה מהר אפשר לתקן הפרות?

ציר הזמן תלוי בהיקף ובמורכבות. תיקונים פשוטים (הוספת alt, תיקון ניגודיות) לוקחים יום. שיפוץ עמוק של רכיבים עם עדכוני ARIA עשוי לקחת שבועות. אנו מספקים תוכנית שלב אחר שלב ויכולים ליישם את התיקונים בעצמנו.

ציר זמן לביקורת

הצוות שלנו כולל מומחי נגישות מוסמכים IAAP עם ניסיון של למעלה מ-5 שנים, שביצעו למעלה מ-100 ביקורות. אנו עוקבים אחר רשימת בדיקות נגישות מקיפה המכסה את כל קריטריוני WCAG 2.1 AA. החל מ-$500 עבור ביקורת של 5 עמודים. הזמינו ביקורת נגישות לאתר שלכם – אנו נעריך את העבודה תוך יום אחד ונכין הצעה מסחרית. תקבלו גם ייעוץ בנושא עדיפויות לתיקון.