צ'קליסט נגישות אתרים (WCAG AA)

איך להשתמש ברשימה

WCAG (Web Content Accessibility Guidelines) של W3C היא הבסיס של התקן הישראלי ת"י 5568, ושל רוב התקנים בעולם. הקריטריונים מחולקים לשלוש רמות: A, AA ו-AAA, והרמה הנדרשת בישראל היא AA. הגרסה העדכנית היא WCAG 2.2, ו-W3C מעודדת להשתמש בה. ברשימה כאן ציינו ליד כל סעיף את מספר הקריטריון, כדי שתוכלו לקרוא עליו בהרחבה. מה החוק דורש בדיוק, במדריך נגישות אתרים בישראל.

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

ניגודיות צבעים

יחס הניגודיות משווה בין הבהירות של צבע הטקסט לבהירות של הרקע. הסולם נע בין 1:1 (אותו צבע) ל-21:1 (שחור על לבן). W3C מדגישה שלא מעגלים: יחס של 4.499:1 לא עומד בסף של 4.5:1.

למה 4.5:1? לפי W3C, הסף נבחר כדי לפצות על ירידה ברגישות לניגודיות אצל אנשים עם ראייה של כ-20/40, חדות ראייה שמדווחת כאופיינית לאנשים בסביבות גיל 80. היחס 3:1 הוא המינימום שתקני ISO ו-ANSI ממליצים עליו לראייה רגילה, ו-W3C מסבירה שטקסט גדול, עם קווים עבים יותר, קל לקריאה גם בניגודיות נמוכה יותר. אותו סף, 3:1, חל על הגבולות והאייקונים שבעזרתם מזהים כפתור או שדה.

סעיף קרוב: אל תעבירו מידע בצבע בלבד (1.4.1, רמה A). שדה עם שגיאה צריך גם טקסט או אייקון, וקישור בתוך פסקה צריך להיות מזוהה לא רק לפי הצבע.

מקלדת ופוקוס

• הכול זמין במקלדת (2.1.1, A): תפריטים, חלונות קופצים, סליידרים ובוררי תאריך.
• אין מלכודת מקלדת (2.1.2, A): אפשר לצאת מכל רכיב, כולל חלון קופץ, בלי עכבר.
• סדר פוקוס הגיוני (2.4.3, A): המעבר עם Tab הולך לפי סדר הקריאה, ובעברית זה מימין לשמאל ומלמעלה למטה.
• פוקוס גלוי (2.4.7, AA): תמיד רואים איפה נמצאים. אל תבטלו את מסגרת הפוקוס בלי תחליף ברור.
• הפוקוס לא מוסתר (2.4.11, AA, חדש ב-2.2): כותרת נעוצה או באנר עוגיות לא מכסים לגמרי את הרכיב שבפוקוס.
• דילוג לתוכן (2.4.1, A): קישור "דלגו לתוכן הראשי" או מבנה כותרות ואזורים שמאפשר לעקוף את הניווט החוזר.

תוכן, תמונות ומבנה

• טקסט חלופי (1.1.1, A): לכל תמונה שמעבירה מידע יש alt שמתאר את המידע. תמונה דקורטיבית מקבלת alt ריק.
• כותרות ומבנה (1.3.1, A): H1 אחד, ואחריו H2 ו-H3 לפי ההיררכיה, ולא לפי הגודל שרציתם.
• שפה של העמוד (3.1.1, A): lang="he" על העמוד, ושפה נכונה לקטעים בשפה אחרת (3.1.2, AA).
• כותרת עמוד (2.4.2, A): לכל עמוד title שמתאר אותו.
• קישורים ברורים (2.4.4, A): "להורדת המדריך" ולא "לחצו כאן".
• כתוביות (1.2.2, A): לסרטונים מוקלטים יש כתוביות.
• הגדלת טקסט (1.4.4, AA): אפשר להגדיל ל-200% בלי לאבד תוכן.
• התאמה למסך צר (1.4.10, AA): בגודל שווה ערך ל-320 פיקסלים רוחב, אין גלילה אופקית לתוכן רגיל.
• ריווח טקסט (1.4.12, AA): הטקסט לא נחתך כשמשתמש מגדיל ריווח שורות ומילים.

טפסים ורכיבים אינטראקטיביים

• תווית לכל שדה (3.3.2, A): placeholder לבד לא מספיק, כי הוא נעלם כשמקלידים.
• זיהוי שגיאות (3.3.1, A) והצעה לתיקון (3.3.3, AA): ההודעה בטקסט, ליד השדה.
• מטרת השדה (1.3.5, AA): autocomplete לשדות של פרטי המשתמש, כמו שם, מייל וטלפון.
• שם, תפקיד וערך (4.1.2, A): רכיבים מותאמים (כמו מתג או לשונית) חושפים לקורא המסך מה הם ובאיזה מצב.
• גודל מטרה (2.5.8, AA, חדש ב-2.2): מטרות לחיצה של לפחות 24 על 24 פיקסלים, או מרווח מספיק ביניהן.
• חלופה לגרירה (2.5.7, AA, חדש ב-2.2): כל פעולה של גרירה אפשרית גם בלחיצה.
• הודעות מצב (4.1.3, AA): הודעה כמו "נוסף לסל" מוקראת בלי להזיז את הפוקוס.

על טפסים בעברית בפרט (כיוון שדות, ת"ז, טלפון) במדריך טפסים בעברית.

איך בודקים

1. בדיקה אוטומטית כלים כמו WAVE, axe או Lighthouse תופסים חלק מהבעיות (ניגודיות, alt חסר, תוויות חסרות). הם לא תופסים הכול.
2. מקלדת בלבד עברו על הזרימה המרכזית עם Tab, Shift+Tab, Enter, רווח וחצים.
3. קורא מסך NVDA ב-Windows או VoiceOver במכשירי Apple. הקשיבו לטופס ולתפריט הראשי.
4. הגדלה הגדילו את הדפדפן ל-200% ו-400% ובדקו שהכול נשאר שמיש.
5. בדיקה עם משתמשים אם אפשר, שלבו אנשים עם מוגבלות בבדיקת שמישות.

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