צ׳קליסט WCAG 2.2 AA לנגישות אתרים בחנויות אונליין

צ׳קליסט WCAG 2.2 AA להנגשת חנויות Shopify ו-WooCommerce לפי סוג דף: טקסט חלופי, ניגודיות, תוויות, מקלדת, פוקוס, גודל מטרה והקריטריונים החדשים של 2.2.

צוות התוכן של FixReportsזמן קריאה: 9 דק׳

צ׳קליסט WCAG 2.2 AA לחנות אונליין מתחיל בכשלים שנמצאים ברוב התבניות של חנויות: טקסט חלופי חסר, טקסט בניגודיות נמוכה, קישורים וכפתורים בלי שם נגיש, שדות טופס בלי תווית, מלכודות מקלדת ופוקוס שלא רואים. WCAG 2.2 מוסיף לכך בדיקות ברמת AA שפוגעות בחנויות במיוחד: רכיבים בפוקוס שמוסתרים מתחת לפסים נעוצים (2.4.11), מטרות מגע קטנות מ-24 על 24 פיקסלי CSS (2.5.8) ותהליכי התחברות שמחייבים לזכור משהו או להקליד אותו מחדש (3.3.8). בדקו כל סוג דף (דף בית, דף קטגוריה, דף מוצר, סל) עם מקלדת ועם בודק אוטומטי, ואז תקנו את קובצי התבנית כך שכל דף יירש את התיקון.

עיקרי הדברים

  • WCAG 2.2 הפך להמלצה רשמית של W3C (W3C Recommendation) ב-5 באוקטובר 2023. המהדורה הנוכחית מתוארכת ל-12 בדצמבר 2024, והיא אושרה כתקן ISO/IEC 40500:2025 (נפתח בכרטיסייה חדשה).
  • ב-WebAIM Million 2026 (נפתח בכרטיסייה חדשה) (נתונים מפברואר 2026), ב-95.9% מדפי הבית של מיליון האתרים המובילים נמצאו כשלי WCAG 2 שניתנים לזיהוי.
  • ששת הכשלים הנפוצים ביותר היו טקסט בניגודיות נמוכה (83.9% מהדפים), טקסט חלופי חסר (53.1%), תוויות טופס חסרות (51%), קישורים ריקים (46.3%), כפתורים ריקים (30.6%) ושפת דף שלא הוגדרה (13.5%).
  • ב-42,516 דפי הבית של Shopify במדגם הזה זוהו בממוצע 75.1 שגיאות, לעומת 56.1 בכלל הדפים.
  • WCAG 2.2 מוסיף ארבעה קריטריונים ברמת AA, שהם 2.4.11, 2.5.7, 2.5.8 ו-3.3.8, ושני קריטריונים ברמה A, שהם 3.2.6 ו-3.3.7, ומסיר את 4.1.1 Parsing.

מה השתנה ב-WCAG 2.2 עבור חנויות אונליין?

WCAG 2.2 הוסיף תשעה קריטריוני הצלחה, שישה מהם ברמה A או AA, והסיר את 4.1.1 Parsing כמיושן (W3C WAI (נפתח בכרטיסייה חדשה)).

קריטריון חדשרמהמה המשמעות בחנות
2.4.11 Focus Not Obscured (Minimum)AAקישור או כפתור בפוקוס לא יכולים להיות מוסתרים לגמרי על ידי כותרת עליונה נעוצה (sticky header), פס "הוספה לסל" נעוץ, באנר עוגיות או וידג׳ט צ׳אט
2.5.7 Dragging MovementsAAכל דבר שמחייב גרירה, כמו מחוון (slider) לטווח מחירים, צריך חלופה שעובדת בהקשה אחת
2.5.8 Target Size (Minimum)AAמטרות לחיצה והקשה הן בגודל 24 על 24 פיקסלי CSS לפחות, או מרוחקות זו מזו כך שעיגול של 24 px סביב כל אחת מהן לא נוגע בשכנות שלה
3.2.6 Consistent HelpAקישורי עזרה, פרטי יצירת קשר או צ׳אט מופיעים באותו סדר יחסי בכל דף
3.3.7 Redundant EntryAלא מבקשים את אותו מידע פעמיים באותו תהליך; ממלאים אותו אוטומטית או מאפשרים לבחור אותו
3.3.8 Accessible Authentication (Minimum)AAההתחברות לא יכולה להיות תלויה בשינון או בהעתקה ידנית, אלא אם יש חלופה או עזר כמו הדבקה ומנהלי סיסמאות

שלושת האחרים (2.4.12, 2.4.13 ו-3.3.9) הם ברמה AAA. מכיוון ש-2.2 שומר על כל קריטריון של 2.1 מלבד 4.1.1, עמידה ב-2.2 AA מכסה גם את 2.1 AA.

אילו קריטריונים של WCAG נכשלים הכי הרבה בתבניות של חנויות?

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

קריטריוןמה נכשל בחנויותאיך מתקנים
1.1.1 Non-text Content (A)תמונות מוצר בלי טקסט חלופי או עם שם הקובץ כטקסט חלופי; תמונות מקושרות בלי טקסטתארו את המוצר שבתמונה (צבע, סגנון, זווית). השתמשו ב-alt="" רק לתמונות דקורטיביות. תבניות Shopify צריכות להפיק את image.alt
1.4.3 Contrast (Minimum) (AA)טקסט גוף באפור בהיר, טקסט placeholder, תגיות מבצע, טקסט על תמונות heroיחס 4.5:1 לטקסט רגיל ו-3:1 לטקסט גדול (בערך 24 px, או 18.5 px מודגש) (W3C (נפתח בכרטיסייה חדשה))
2.4.4 Link Purpose (A), 4.1.2 Name, Role, Value (A)קישורי סל, חיפוש ורשתות חברתיות שהם אייקון בלבד; חיצי סליידר; כפתורי סגירה "X" בלי שםתנו לכל רכיב טקסט גלוי או aria-label, למשל "סל, 2 פריטים"
1.3.1 Info and Relationships (A), 3.3.2 Labels or Instructions (A)שדות ניוזלטר וחיפוש עם טקסט placeholder בלבד; שדות כמות בלי תוויתהשתמשו ב-<label for> שתואם ל-id של השדה; קבצו דוגמיות צבע (swatches) שהן כפתורי רדיו בתוך fieldset עם legend
2.1.1 Keyboard (A), 2.1.2 No Keyboard Trap (A)תפריטים שעובדים רק בריחוף (hover), דוגמיות שבנויות מרכיבי div, חלונות קופצים שאי אפשר לסגור מהמקלדתהשתמשו ברכיבי button ו-a אמיתיים; Escape סוגר שכבות-על ומחזיר את הפוקוס
2.4.7 Focus Visible (AA)outline: none ב-CSS של התבניתהוסיפו סגנון :focus-visible שבולט על רקע הדף

WebAIM מצא גם שלאחת מכל ארבע תמונות מקושרות לא היה טקסט חלופי, וש-45% מהתמונות בלי טקסט חלופי היו קישורים (WebAIM (נפתח בכרטיסייה חדשה)). ברשת המוצרים של דף קטגוריה, בדרך כלל מדובר בקישור שעל תמונת המוצר.

מה לבדוק בדף הבית?

בדקו את הכותרת העליונה (header), אזור ה-hero וכל מה שקופץ, כי כל מבקר נתקל בהם ראשונים.

  • קישור דילוג. קישור "דלג לתוכן" כרכיב הראשון שמקבל פוקוס (2.4.1 Bypass Blocks, A).
  • אייקונים בכותרת העליונה. לאייקונים של החיפוש, החשבון והסל יש שמות נגישים, ושם הסל כולל את מספר הפריטים.
  • תפריט. נפתח עם Enter או מקש הרווח, תתי-הפריטים נגישים עם Tab, נסגר עם Escape ולא תלוי בריחוף (2.1.1). לפי דרישות ה-Theme Store (נפתח בכרטיסייה חדשה) של Shopify, כל חלקי הדף, כולל תפריטים נפתחים, חייבים להיות נגישים במקלדת.
  • סליידר hero. אם השקפים זזים אוטומטית יותר מחמש שניות, ספקו כפתור השהיה (2.2.2 Pause, Stop, Hide, A).
  • פס הודעות וטקסט על תמונות. מדדו את הניגודיות; צבעי מותג נכשלים לעיתים קרובות ביחס 4.5:1.
  • חלונות קופצים ובאנרים של עוגיות. העבירו את הפוקוס לתוך החלון הקופץ, הוסיפו תווית לשדה הדוא״ל, אפשרו סגירה עם Escape, וודאו שבאנר נעוץ לעולם לא מכסה לגמרי את הרכיב שבפוקוס (2.4.11). W3C מציין את מאפיין ה-CSS scroll-padding כאחת הדרכים לשמור על רכיבים בפוקוס מחוץ לפסים נעוצים (W3C (נפתח בכרטיסייה חדשה)).
  • שפת הדף. לרכיב html יש מאפיין lang נכון (3.1.1 Language of Page, A).

מה לבדוק בדפי קטגוריה?

דפי קטגוריה (collections) נכשלים בדרך כלל בכרטיסי מוצר, במסננים ובדוגמיות צבע.

  • כרטיסי מוצר. לקישור התמונה יש טקסט חלופי, או שהתמונה מוסתרת מטכנולוגיות מסייעות וקישור הכותרת נושא את השם.
  • מסננים. לכל תיבת סימון יש תווית, ולכל קבוצה יש כותרת או legend. מגירת המסננים נפתחת, פועלת ונסגרת במקלדת. הכריזו על מספר התוצאות המעודכן כהודעת סטטוס (4.1.3 Status Messages, AA).
  • מחווני מחיר. הוסיפו שדות מספר למחיר מינימלי ומקסימלי, כדי שהמסנן יעבוד בלי גרירה (2.5.7) ובלי עכבר (2.1.1).
  • דוגמיות צבע. לכל דוגמית יש שם טקסטואלי, ו"אזל מהמלאי" לא מוצג באמצעות צבע בלבד (1.4.1 Use of Color, A). הדוגמיות עומדות בגודל 24 על 24 פיקסלי CSS או בכלל המרווח (2.5.8).
  • מיון ועימוד. לתפריט המיון הנפתח יש תווית; קישורי העמודים וכפתורי "טען עוד" עומדים בגודל המטרה המינימלי.

מה לבדוק בדפי מוצר?

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

  • גלריה. לכל תמונה יש טקסט חלופי, התמונות הממוזערות הן כפתורים עם שמות כמו "הצג תמונה 2", והחיצים עובדים בלי גרירה (2.5.7).
  • בוררי וריאציות. אפשרויות המידה והצבע נמצאות בקבוצה עם תווית (1.3.1), האפשרות שנבחרה נחשפת לקוראי מסך (4.1.2), ומידות שאינן זמינות מסומנות בטקסט.
  • כמות. לשדה יש תווית, ולכפתורי הפלוס והמינוס יש שמות והם עומדים ב-2.5.8. ה-Theme Store של Shopify דורש כיום מטרות מגע בגודל 24 על 24 פיקסלי CSS לפחות, ושיטות העבודה המומלצות לנגישות (נפתח בכרטיסייה חדשה) של Shopify ממליצות על 44 על 44 לרכיבים ראשיים.
  • הוספה לסל. הודעות הצלחה ושגיאה מוכרזות (4.1.3). התלונה של ה-FTC נגד ספק של תוסף נגישות (overlay) ציינה אתר שבו קורא מסך לא הכריז שפריט נוסף לסל, ושבו גרפיקת דירוג של 5 כוכבים הוקראה ככפתור "previous" (התלונה של ה-FTC (נפתח בכרטיסייה חדשה)).
  • דירוגים, לשוניות ואקורדיונים. לדירוגים יש טקסט כמו "4.5 מתוך 5 כוכבים". אקורדיונים חושפים אם הם פתוחים או סגורים.
  • פס "הוספה לסל" נעוץ. אסור שיכסה לגמרי את הרכיב שבפוקוס בזמן שמשתמש מקלדת מתקדם עם Tab במורד הדף (2.4.11).
  • וידאו. לסרטוני מוצר עם דיבור יש כתוביות (1.2.2 Captions (Prerecorded), A).

מה לבדוק בסל ובהתחברות?

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

  • מגירת הסל. הפוקוס עובר לתוך המגירה, נשאר בה כל עוד היא פתוחה, וחוזר לכפתור הסל כש-Escape סוגר אותה, כפי ששיטות העבודה המומלצות של Shopify מתארות.
  • שורות פריטים. לכל שדה כמות יש תווית עם שם המוצר, וכל כפתור הסרה אומר מה הוא מסיר, למשל "הסרת חולצת פשתן, מידה M".
  • שדות קוד הנחה והערות. עם תווית, ועם הודעות שגיאה שמתוארות בטקסט (3.3.1 Error Identification, A).
  • כפתור המעבר לקופה. נגיש עם Tab, עם פוקוס שרואים בבירור, ולא מוסתר מאחורי רכיבים נעוצים.
  • התחברות (3.3.8). חשבונות הלקוחות של Shopify משתמשים כברירת מחדל בהתחברות ללא סיסמה עם קוד חד-פעמי (נפתח בכרטיסייה חדשה). לפי W3C, צריך להיות אפשר להדביק קודים או למלא אותם אוטומטית, וחסימה של הדבקה או של מנהלי סיסמאות היא כשל בקריטריון; CAPTCHA שמבוסס על זיהוי אובייקטים מותר ברמת AA, אבל CAPTCHA של חידות או של תרגילי חשבון מחייב שיטה נוספת (W3C (נפתח בכרטיסייה חדשה)).

כאן ההבדלים בין הפלטפורמות חשובים. ב-Shopify, הקובץ checkout.liquid כבר לא נתמך (נפתח בכרטיסייה חדשה) בשלבי הפרטים, המשלוח והתשלום, כך שרוב קוד הקופה שייך ל-Shopify ולא לתבנית שלכם; בדקו את אפליקציות הקופה ואת ההתאמות האישיות שאתם מוסיפים. ב-WooCommerce, הקופה היא דף באתר ה-WordPress שלכם. WooCommerce מצהירה שממשק הקצה של הליבה שלה תואם במידה רבה ל-WCAG 2.2 AA (ההצהרה עודכנה לאחרונה ב-1 באפריל 2025), אבל התבנית והתוספים שלכם עדיין יכולים לפגוע בכך (WooCommerce (נפתח בכרטיסייה חדשה)).

איך בודקים חנות מול הצ׳קליסט הזה?

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

  1. סריקה אוטומטית. כלים כמו axe, WAVE או Lighthouse מזהים בעיות של ניגודיות, טקסט חלופי, תוויות וקישורים ריקים. ה-Theme Store של Shopify מבקש ציון נגישות ממוצע של 90 לפחות ב-Lighthouse בדף הבית, בדפי קטגוריה ובדפי מוצר. זו רצפה, לא עמידה בתקן: לפי W3C, כלים אינם יכולים לקבוע נגישות בעצמם (נפתח בכרטיסייה חדשה).
  2. קנייה במקלדת בלבד. מדף הבית, הגיעו למוצר דרך התפריט או החיפוש, סננו, בחרו וריאציה, הוסיפו לסל, פתחו את הסל והגיעו לכפתור המעבר לקופה, הכל בלי עכבר.
  3. בדיקה מדגמית עם קורא מסך. עם VoiceOver או NVDA, האזינו לשם המוצר, למחיר, למצב הווריאציה ולאישור ההוספה לסל.
  4. בדיקה חוזרת אחרי שינויים. עדכוני תבנית ואפליקציות חדשות יכולים לבטל תיקונים.

הסריקה החינמית שלנו מכסה את שלב 1 בדף בית, דף קטגוריה, דף מוצר, דף סל ודף תוכן, בדפדפן Chromium אמיתי עם axe-core. דוח תיקוני נגישות בודק עד 25 דפים, מוסיף את שלב 2 כמבחן קנייה במקלדת בלבד עד כפתור המעבר לקופה, מספק קוד לפני ואחרי, וכולל רשימת בדיקה לשלב 3, שדורש אדם עם קורא מסך. אף אחד מהם לא מבטיח עמידה ב-ADA או ב-WCAG.

שאלות נפוצות

האם WCAG 2.2 מחייב מבחינה חוקית חנויות אונליין בארה״ב?

למשרד המשפטים האמריקאי (Department of Justice) אין תקנת ADA שקובעת תקן אינטרנטי לעסקים פרטיים, וההנחיות שלו מ-2022 בנושא נגישות אתרים (נפתח בכרטיסייה חדשה) מפנות ל-WCAG כהנחיה מועילה. מכתבי דרישה (demand letters) מצטטים בדרך כלל את WCAG 2.1 או 2.2 AA, ולכן כדאי להתייעץ עם עורך דין לגבי החובות הספציפיות שלכם.

האם עמידה ב-WCAG 2.2 AA היא גם עמידה ב-WCAG 2.1 AA?

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

מהו גודל המטרה המינימלי ב-WCAG 2.2?

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

האם ציון נגישות 100 ב-Lighthouse אומר שהחנות שלי עומדת בתקן?

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

האם התחברות עם סיסמה נכשלת ב-3.3.8?

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

באיזו תדירות כדאי לבדוק את החנות מחדש?

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

מקורות

כל המדריכים