כלי נגישות חינמי

בדיקת WCAG 2.2

אפשר לראות מה מצב האתר בכל אחד מ-55 קריטריוני ההצלחה של WCAG 2.2 ברמות A ו-AA. כל קריטריון מקבל אחד מארבעה סטטוסים, כך שברור מה הבדיקות האוטומטיות כיסו ומה אדם עדיין צריך לבדוק.

חינם. בודק עד חמישה עמודים מרכזיים תוך כדקה.

מה הכלי בודק

  • כל קריטריון ברמות A ו-AA

    כל 55 הקריטריונים, 31 ברמה A ו-24 ברמה AA, לפי הסדר של WCAG, עם המספר והשם של כל אחד. 4.1.1 Parsing לא נכלל, כי WCAG 2.2 מגדיר אותו כמיושן.

  • תוצאות אוטומטיות ממופות לקריטריונים

    כללי axe-core רצים על הדף שהזנת ועל עד ארבעה דפים מרכזיים, וכל תוצאה משויכת לקריטריוני ההצלחה שהכלל בודק. קריטריון נכשל כשאחד הכללים שלו נכשל באחד הדפים שנבדקו.

  • ראיות מבדיקת המקלדת

    בדיקת Tab של 40 לחיצות בדף הראשון מזינה את 2.1.2 No Keyboard Trap, וכהיוריסטיקה שמוצגת לבדיקה, גם את 2.4.7 Focus Visible.

  • תוצאות לא מוכרעות נשמרות בנפרד

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

  • פערים גלויים במקום ציון

    קריטריונים שאף כלל אוטומטי לא מכסה מסומנים כ"בדיקה ידנית" (Manual check). שום דבר לא מתמצע לאחוז שיסתיר את מה שלא נבדק.

מה הכלי לא יכול לבדוק

  • להכריע בקריטריונים שדורשים שיקול דעת אנושי, כמו 1.4.10 Reflow, 1.4.11 Non-text Contrast, קריטריוני 1.2 על כתוביות ותיאור שמע, ו-3.3.1 עד 3.3.4 על שגיאות בטפסים.
  • להפוך "ללא כשלים אוטומטיים" (No automated failures) לעמידה בקריטריון. כלל שרץ ועבר מכסה רק את מה שהכלל הזה בודק.
  • להפיק הצהרת התאמה, הצהרת נגישות או VPAT. התאמה (conformance) נבחנת על דפים שלמים ותהליכים מלאים, על ידי אנשים.
  • לבדוק את רמה AAA, או דפים מעבר לחמשת הדפים שבסריקה.
  • להגיע לשלבים שמאחורי התחברות או תהליך תשלום, שבהם חלים בדרך כלל קריטריונים כמו 3.3.7 Redundant Entry ו-3.3.8 Accessible Authentication.

למה זה חשוב

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

כלים אוטומטיים נוגעים בפחות ממחצית הקריטריונים ברמות A ו-AA: axe-core ממפה את הכללים שלו לכ-25 מתוך 55. לשאר אין בדיקה אוטומטית אמינה. תוכנה לא יכולה לדעת אם הודעת שגיאה מציעה תיקון (3.3.3) או אם דף עדיין עובד ברוחב 320 פיקסלי CSS (1.4.10). הצגתם כבדיקות ידניות מראה איפה עדיין צריך לבדוק.

גם קריטריון ללא כשלים אוטומטיים יכול להיכשל. הכללים של 1.1.1 Non-text Content בודקים שלתמונה יש טקסט חלופי; הם לא יכולים לדעת ש-alt="IMG_2041.jpg" חסר תועלת למי שלא יכול לראות את התמונה.

איך לקרוא את התוצאות

נכשל
לפחות כלל אוטומטי אחד שקשור לקריטריון הזה נכשל בדף שנבדק. זו בעיה ודאית; בדיקת נגישות האתר מציגה את הרכיבים והדפים שמאחוריה.
דורש בדיקה
בדיקה אוטומטית סימנה משהו שהיא לא הצליחה להכריע בו, כמו הניגודיות של טקסט על מעבר צבעים (gradient). אדם צריך להסתכל על הרכיב.
ללא כשלים אוטומטיים
לפחות כלל אחד של axe-core שקשור לקריטריון רץ ועבר. אין פירוש הדבר עמידה בקריטריון: הכללים מכסים רק חלק ממה שהקריטריון דורש.
לא הופעל
קיימים כללים אוטומטיים לקריטריון הזה, אבל שום דבר בדפים שנבדקו לא נתן להם מה לבדוק, למשל אין וידאו עבור כללי הכתוביות או אין טפסים עבור כללי התוויות. אם יש באתר תוכן כזה במקום אחר, כדאי לבדוק אותו ידנית.
בדיקה ידנית
אף כלל אוטומטי לא מכסה את הקריטריון הזה, ולכן הסריקה לא אומרת עליו דבר, לא לטוב ולא לרע. יש לבדוק אותו ידנית.
רמה A ורמה AA
רמה A היא המינימום. מדיניות שמפנה ל-WCAG מציינת בדרך כלל את רמה AA, שכוללת כל קריטריון של רמה A.

איך לתקן את הבעיות הנפוצות ביותר

  • 4.1.2 Name, Role, Value נכשל

    פקדים מותאמים אישית שבנויים מרכיבי div או span (תפריטים, לשוניות, אקורדיונים, מתגים) לא מודיעים לטכנולוגיה מסייעת מה הם או אם הם פתוחים. כדאי להשתמש ברכיב <button> מובנה בכל מקום אפשרי, לתת לו שם, ולהגדיר aria-expanded או aria-pressed כדי שהמצב שלו יוקרא.

  • 1.3.1 Info and Relationships נכשל

    המבנה צריך להיות בקוד ה-HTML, לא רק בעיצוב. יש להשתמש ברכיבי h2 ו-h3 אמיתיים במקום פסקאות מודגשות, ב-ul או ol לרשימות, ב-th עם scope לכותרות של טבלה, ובתוויות או ב-fieldset עם legend לקבוצות של שדות טופס.

  • 3.1.1 Language of Page נכשל

    יש להוסיף מאפיין lang לרכיב html, למשל <html lang="en">. ערכות עיצוב של WordPress מדפיסות אותו בדרך כלל באמצעות language_attributes(); בערכת עיצוב של Shopify, יש להשתמש ב-<html lang="{{ request.locale.iso_code }}"> בקובץ layout/theme.liquid.

  • 2.5.8 Target Size (Minimum) נכשל

    אייקונים קטנים וקישורים צפופים קשים ללחיצה באצבע. כל יעד צריך להיות בגודל 24 × 24 פיקסלי CSS לפחות, או שיש לרווח יעדים קטנים כך שעיגול של 24 px שממורכז על כל אחד מהם לא חופף ליעד אחר. ריפוד (padding) מגדיל את היעד בלי לשנות את האייקון.

  • איך לעבור על הבדיקות הידניות

    כדאי להתחיל בבדיקות המהירות. עבור 1.4.10 Reflow, מגדילים חלון דפדפן ברוחב 1280 px ל-400% ובודקים ששום דבר לא מחייב גלילה הצידה. עבור 2.4.7 ו-2.4.11, עוברים על הדף עם Tab ובודקים שהמיקוד תמיד גלוי ואף פעם לא מוסתר מאחורי כותרת עליונה נעוצה (sticky) או באנר עוגיות. עבור 3.3.1, שולחים טופס עם טעויות ובודקים אם השגיאות מתוארות בבירור בטקסט.

שאלות על הכלי

מה השתנה ברמות A ו-AA ב-WCAG 2.2?

נוספו שישה קריטריונים: 2.4.11 Focus Not Obscured (Minimum), 2.5.7 Dragging Movements, 2.5.8 Target Size (Minimum), 3.2.6 Consistent Help, 3.3.7 Redundant Entry ו-3.3.8 Accessible Authentication (Minimum). בנוסף, WCAG 2.2 מוסיף שלושה קריטריונים ברמה AAA ומסיר את 4.1.1 Parsing.

למה 4.1.1 Parsing לא מופיע ברשימה?

WCAG 2.2 מגדיר את 4.1.1 Parsing כמיושן ומסיר אותו, כי דפדפנים וטכנולוגיות מסייעות כבר לא תלויים בשגיאות הסימון שהוא כיסה. W3C מציין שעבור WCAG 2.0 ו-2.1 הוא נחשב כיום כמתקיים תמיד בתוכן HTML.

האם עמידה ב-WCAG 2.2 מכסה גם את WCAG 2.1?

כן. WCAG 2.2 תואם לאחור: תוכן שעומד ב-2.2 עומד גם ב-2.1 וב-2.0. לכן בדיקה מול 2.2 מכסה גם את הגרסאות הקודמות שמדיניות רבות עדיין מפנות אליהן.

אפשר להשתמש בזה כדי לכתוב הצהרת נגישות או VPAT?

זו נקודת התחלה, לא דוח התאמה. הצהרה או VPAT מחייבים הערכה של כל קריטריון, ורובם על ידי אדם; הרשימות "בדיקה ידנית" (Manual check) ו"דורש בדיקה" מראות אילו קריטריונים עדיין צריכים את זה.

למה כל כך הרבה קריטריונים מסומנים "בדיקה ידנית" (Manual check)?

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

מקורות

כלים קשורים

דוח תיקוני נגישות ($174, תשלום חד-פעמי) מתחיל מהסריקה החינמית המלאה ומוסיף עוד עמודים, את השינוי שצריך לבצע לכל ממצא, קובץ PDF ובדיקות חוזרות לאימות התיקונים.

מידע על דוח תיקוני נגישות