WCAG רמה A: יסודות הנגישות שכל אתר חייב

איך לקרוא את הקטגוריות

כל קריטריון של WCAG מסומן במספר תלת-חלקי: X.Y.Z. הספרה הראשונה היא העיקרון (1=Perceivable, 2=Operable, 3=Understandable, 4=Robust). הספרה השנייה היא הסעיף, השלישית הקריטריון הספציפי.

עיקרון 1: ניתן לתפיסה (Perceivable)

1.1.1 — תוכן לא-טקסטואלי

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

<!-- רע -->
<img src="logo.png">

<!-- טוב -->
<img src="logo.png" alt="לוגו של חברת אקמה — אריה כתום על רקע כחול">

<!-- אם התמונה דקורטיבית בלבד -->
<img src="divider.png" alt="" role="presentation">

1.2.1 — תוכן אודיו / וידאו בלבד (מוקלט)

אם יש לך פודקאסט (אודיו בלבד) או סרטון אילם (וידאו בלבד) — חייב להציע חלופה. תמלול לפודקאסט. תיאור טקסטואלי לסרטון אילם.

1.2.2 — כתוביות לסרטוני וידאו (מוקלטים)

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

1.2.3 — תיאור אודיו או חלופה למדיה (מוקלטים)

לסרטון מוקלט — חייב תמלול מלא של מה שקורה (אודיו ווידאו), או תיאור אודיו (audio description) — קול שמסביר מה קורה בין דיאלוגים.

1.3.1 — מידע ויחסים

המבנה הסמנטי של ה-HTML חייב לשקף את המבנה הוויזואלי. כותרות בתוך <h1>, <h2>... לא תוך <div class="title">. רשימות עם <ul>. טפסים עם <label>.

<!-- רע -->
<div class="big-bold">כותרת ראשית</div>
<div>• פריט 1</div>
<div>• פריט 2</div>

<!-- טוב -->
<h1>כותרת ראשית</h1>
<ul>
  <li>פריט 1</li>
  <li>פריט 2</li>
</ul>

1.3.2 — סדר משמעותי

סדר הקריאה במקור (ה-DOM) חייב להיות הגיוני. אם הצגתי חדשות בעיצוב 3-עמודות עם CSS Grid, אבל ב-DOM הסדר הוא מאמר 3, ואז 1, ואז 2 — קורא מסך יקריא בסדר השגוי.

1.3.3 — מאפיינים תחושתיים

אסור לתת הוראות שמסתמכות רק על תכונה חזותית. למשל: "לחץ על הכפתור הירוק מימין" — לא עובד לעיוור צבעים שלא רואה ירוק, ולא לקורא מסך שלא יודע איפה "מימין". חייב לתת תווית טקסטואלית: "לחץ על שלח".

1.4.1 — שימוש בצבע

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

1.4.2 — שליטה באודיו

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

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

2.1.1 — מקלדת

כל פונקציה חייבת להיות נגישה במקלדת. אנשים עם מוגבלות מוטורית, אנשים עם רעד, אנשים עיוורים שלא רואים את העכבר — כולם משתמשים במקלדת בלבד. אם יש לך טופס שעובד רק עם drag-and-drop — זו הפרה.

2.1.2 — ללא מלכודת מקלדת

חייב להיות אפשר לעבור Tab מאלמנט לאלמנט. אם פוקוס נכנס לתוך widget מסוים ולא ניתן לצאת ממנו (למשל חלון מודאלי שלא סוגרים עם Escape) — זו מלכודת.

2.1.4 — קיצורי מקש של תווים

אם האתר מגדיר קיצורי מקש חד-תוויים (לחיצה על "S" עושה משהו) — חייב לאפשר למשתמש לכבות או לשנות אותם. אחרת מי שמשתמש בקורא מסך (ש"מקליד" אוטומטית) יקבל פעולות אקראיות.

2.2.1 — זמן הניתן לשינוי

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

2.2.2 — השהיה, עצירה, הסתרה

כל מידע נע, מהבהב או שמתעדכן אוטומטית (banner מתחלף, ticker חדשות) חייב להיות עם כפתור עצירה.

2.3.1 — שלוש הבזקות או פחות

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

2.4.1 — דילוג על בלוקים

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

<a href="#main" class="skip-link">דלג לתוכן הראשי</a>
...
<main id="main">...</main>

2.4.2 — עמוד מכותר

לכל עמוד <title> משלו, שמתאר את תוכן העמוד. לא "Home Page" לכל הדפים.

2.4.3 — סדר פוקוס

סדר ה-Tab חייב להיות הגיוני. אם משתמש לוחץ Tab, הפוקוס חייב לעבור בסדר טבעי — לא לקפוץ אקראית בעמוד.

2.4.4 — מטרת קישור (בהקשר)

טקסט הקישור חייב להיות מובן (לפחות כשרואים את ההקשר הסמוך). "לחץ כאן" וריאציות שלו — בעייתיות. עדיף "הורד את המדריך השנתי 2026 (PDF, 2MB)".

2.5.1 — מחוות מצביע

כל פעולה שדורשת מחווה רב-נקודתית (זום בשתי אצבעות) או מסלול מורכב (swipe) חייבת חלופה של מחווה פשוטה.

2.5.2 — ביטול מצביע

לחיצה אסור שתפעל ב-onMouseDown. חייב להמתין ל-onMouseUp, כדי שמשתמש שלחץ בטעות יוכל להזיז את הסמן ולשחרר במקום בטוח.

2.5.3 — תווית בשם

ה-aria-label חייב להכיל את הטקסט הויזואלי. אם הכפתור אומר "שלח" אבל ה-aria-label אומר "submit form" — המשתמש שמשתמש בפקודה קולית "לחץ על שלח" לא יצליח.

2.5.4 — הפעלה בתנועה

אם פיצ'ר מופעל בתנועת המכשיר (לנער את הטלפון = ביטול) — חייב חלופת כפתור.

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

3.1.1 — שפת העמוד

<html lang="he"> חובה. אחרת קוראי מסך יקריאו עברית במבטא אנגלי.

3.2.1 — בפוקוס

כשמשתמש לוחץ Tab על אלמנט, אסור שיקרה משהו מפתיע (למשל ניווט לעמוד אחר). פוקוס לא אמור להפעיל פעולות.

3.2.2 — בקלט

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

3.2.6 — עזרה עקבית

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

3.3.1 — זיהוי שגיאות

שגיאות בטפסים חייבות להיות מזוהות בטקסט. הצבע האדום זה ב-AA רמה נוספת, אבל ב-A מספיק להגיד "שדה האימייל ריק".

3.3.2 — תוויות או הוראות

לכל שדה בטופס — תווית. עם <label> או aria-label. placeholder לבדו לא מספיק (הוא נעלם כשמתחילים להקליד).

3.3.7 — כניסה כפולה

חדש ב-WCAG 2.2: אסור לבקש מהמשתמש להזין מידע פעמיים באותו תהליך (למשל שאלת "אימייל לאישור" — אם המידע כבר נשמר במערכת, צריך לאפשר שימוש חוזר).

עיקרון 4: חסון (Robust)

4.1.2 — שם, תפקיד, ערך

לכל רכיב אינטראקטיבי חייב להיות שם, תפקיד וערך נגישים. אם אתה בונה כפתור מ-<div>, חובה להוסיף role="button" ו-aria-label. עדיף פשוט לכתוב <button>.

איך NAGISOT עוזר ברמה A

NAGISOT מטפל אוטומטית בחלק נכבד מקריטריוני A — ברמה החינמית: