WCAG רמה AA: התקן המחייב בחוק הישראלי

עיקרון 1: ניתן לתפיסה — קריטריוני AA

1.2.4 — כתוביות (חי)

סרטונים בשידור חי (webinar, שידור) חייבים כתוביות. זה דרישה רצינית — דורש פתרון של זיהוי דיבור בזמן אמת. NAGISOT ברמה AAA מציע את זה דרך Whisper.

1.2.5 — תיאור אודיו (מוקלט)

ב-A מספיק תמלול. ב-AA חייב גם audio description — קול נוסף שמתאר את האלמנטים הוויזואליים בין דיאלוגים. סרטון של פרסומת? צריך לתאר את מה שקורה על המסך בקול.

1.3.4 — אוריינטציה

האתר חייב לעבוד הן ב-portrait והן ב-landscape. אם הגדרת screen.orientation.lock('portrait') — זו הפרה, אלא אם זה חיוני (מקלדת ציור, מד מהירות).

1.3.5 — זיהוי מטרת הקלט

שדות בטופס חייבים autocomplete מתאים. שדה אימייל? autocomplete="email". סיסמה? autocomplete="current-password". זה עוזר למשתמשים עם דיסלקציה ולמילוי אוטומטי.

1.4.3 — ניגודיות (מינימום)

הקריטריון הכי מצוטט. ניגודיות מינימלית 4.5:1 בין צבע טקסט לרקע. לטקסט גדול (≥18pt או 14pt מודגש) — מספיק 3:1.

1.4.4 — שינוי גודל טקסט

המשתמש חייב להיות מסוגל להגדיל טקסט עד 200% בלי שהאתר יישבר (גלילה אופקית, אובדן תוכן, חפיפת אלמנטים). הכלי הסטנדרטי לבדיקה: Ctrl++ כמה פעמים בדפדפן.

1.4.5 — תמונות של טקסט

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

1.4.10 — Reflow

האתר חייב לתפקד גם ב-320px רוחב (מסך טלפון) בלי גלילה אופקית. זה אומר עיצוב רספונסיבי מלא.

1.4.11 — ניגודיות של תוכן לא-טקסטואלי

לא רק טקסט — גם רכיבי UI (כפתורים, גבולות שדות, אייקונים) חייבים ניגודיות 3:1 מול הרקע. כפתור "שלח" אפור בהיר על רקע אפור בהיר? הפרה.

1.4.12 — ריווח טקסט

אם המשתמש מגדיר ב-CSS שלו ריווח שורות 1.5, ריווח אותיות 0.12em, ריווח מילים 0.16em וריווח פסקאות 2x — האתר חייב להתמודד עם זה בלי לאבד תוכן.

1.4.13 — תוכן בריחוף או בפוקוס

tooltip שמופיע על hover/focus חייב: 1) להיות אפשר לסגור (Escape), 2) להישאר פתוח כשמרחפים מעליו (hoverable), 3) להישאר עד שהמשתמש סוגר אותו (persistent).

עיקרון 2: ניתן להפעלה

2.4.5 — דרכים מרובות

חייבת להיות יותר מדרך אחת להגיע לכל עמוד. בדרך כלל: תפריט ראשי + מפת אתר, או חיפוש. דף נחיתה בודד פטור.

2.4.6 — כותרות ותוויות

כותרות (<h*>) וטופסי <label> חייבים לתאר נושא או מטרה. "כותרת" כשם של h2 אינו מתאר את הנושא.

2.4.7 — פוקוס נראה

הקריטריון השני הכי מפר. מפתחים אוהבים לכתוב outline: none כי "זה מכוער". אסור — חייב להחליף בסגנון פוקוס משלך (outline צבעוני, box-shadow, border בולט).

2.4.11 — פוקוס לא מוסתר (מינימום) חדש ב-2.2

אלמנט שמקבל פוקוס לא יכול להיות מוסתר על-ידי תוכן אחר (sticky header שמכסה אותו). חייב לפחות חלק מהאלמנט בלתי-מוסתר.

2.5.7 — תנועות גרירה חדש ב-2.2

לכל פיצ'ר שדורש drag-and-drop חייבת להיות חלופת לחיצה. למשל: כפתורי "העבר למעלה / למטה" לצד פריט שאפשר לגרור.

2.5.8 — גודל יעד (מינימום) חדש ב-2.2

רכיבים אינטראקטיביים חייבים שטח נגיעה של לפחות 24×24 פיקסלים. אייקון 16x16 קטן מדי. אפשר להוסיף ריפוד padding כדי להגדיל את אזור הלחיצה בלי לשנות את הוויזואל.

עיקרון 3: ניתן להבנה

3.1.2 — שפה של חלקים

אם בעמוד עברי יש מובאה באנגלית — חייב לעטוף ב-<span lang="en">...</span>, אחרת קורא המסך ישתבש (יקריא אנגלית במבטא עברי או להפך).

3.2.3 — ניווט עקבי

תפריטים חייבים להיות באותו מקום בכל עמוד. אם בעמוד אחד התפריט בראש ובעמוד אחר בצד — בעיה.

3.2.4 — זיהוי עקבי

אלמנטים זהים (כפתור "חיפוש", אייקון של עגלה) חייבים אותו שם/תווית בכל עמוד. אם בעמוד אחד "Search" ובאחר "מצא" — בלבול.

3.3.3 — הצעת תיקון שגיאה

לא רק "שגיאה" — צריך להציע איך לתקן. "האימייל חסר @" עדיף על "אימייל לא תקין".

3.3.4 — מניעת שגיאה (משפטית, פיננסית)

בעסקאות (תשלום, הזמנה, מילוי טופס משפטי) חייב מנגנון: או ביטול (Reversible), או בדיקה (Checked), או אישור סופי (Confirmed).

3.3.8 — אימות נגיש חדש ב-2.2

חידוש 2.2. אסור לדרוש מהמשתמש מבחן קוגניטיבי (CAPTCHA תמונה, חישוב) כדי להיכנס — אלא אם יש חלופה. אפשר שימוש בביומטריה, מילוי אוטומטי או password manager.

עיקרון 4: חסון

4.1.3 — הודעות מצב

הודעות דינמיות (toast "נשמר בהצלחה", ספירת תוצאות שמתעדכנת) חייבות role="status" או aria-live="polite" כדי שקוראי מסך יקראו אותן.

<div role="status" aria-live="polite">
  נמצאו 24 תוצאות
</div>

כלים לבדיקה אוטומטית

לא ניתן לבדוק עמידה ב-WCAG ידנית במלואו. הכלים האוטומטיים שתכניסו לסט הכלים שלכם:

• axe DevTools — תוסף כרום של Deque. סורק עמוד ומציג הפרות. חינמי.
• WAVE — של WebAIM. חזותי, מציג overlay עם הפרות. חינמי.
• Lighthouse — מובנה ב-Chrome DevTools. ציון Accessibility.
• Pa11y — CLI להרצה ב-CI/CD.
• NVDA / VoiceOver — לבדיקה ידנית בקוראי מסך אמיתיים.

איפה NAGISOT מתערב ברמה AA

רמה AA היא בדיוק המקום שבו NAGISOT מתחיל לבצע פעולות מבוססות AI. עם מפתח Gemini/OpenAI שלך, התוסף יכול:

• 1.1.1 (AI): כתיבת alt-text אוטומטית לתמונות שאין להן. ה-AI רואה את התמונה, מבין מה בה, וכותב תיאור.
• 1.4.3 (Client): חישוב ניגודיות אוטומטי וכפיית צבעים בעלי ניגודיות 4.5:1.
• 2.4.4 (AI): זיהוי קישורים עמומים ("לחץ כאן", "קרא עוד") ושכתוב לטקסט מתאר ("הורד מדריך 2026").
• 3.3.2 (AI): זיהוי שדות בטפסים ללא תוויות והוספת aria-label אינטליגנטי.
• 3.3.3 (AI): שכתוב הודעות שגיאה ל-language פשוטה ("ERR_42" → "האימייל לא תקין").
• 2.4.11 (Client): זיהוי sticky headers שמכסים פוקוס והוספת scroll padding.
• 4.1.3 (Client): צפייה במוטציות DOM והוספת aria-live shim אוטומטי.