לפי מחקר של WebAIM, 96.3% מהאתרים המובילים בעולם מכילים שגיאות נגישות. באתרים ישראליים, שנבנים לרוב ללא מודעות לתקן 5568, המצב אפילו חמור יותר. הנה חמש הטעויות הנפוצות ביותר - ואיך לתקן אותן.
1 תמונות ללא תיאור טקסטואלי (alt text)
זו הטעות הנפוצה ביותר: תמונות שמופיעות באתר ללא תיאור טקסטואלי. עבור אדם עיוור שמשתמש בקורא מסך, התמונה פשוט לא קיימת.
למה זה בעיה?
- קוראי מסך (JAWS, NVDA) מדלגים על תמונות ללא alt
- תמונות דקורטיביות צריכות
alt=""ריק (לא חסר!) - תמונות עם טקסט (באנרים, גרפים) חייבות תיאור מלא
alt="תיאור התמונה" לכל תג img. התיאור צריך להיות ספציפי ותיאורי - לא "תמונה" אלא "נעלי ספורט כחולות של Nike דגם Air Max".
2 ניגודיות צבעים נמוכה
טקסט אפור בהיר על רקע לבן, או טקסט לבן על רקע צבעוני בהיר - זה נראה "עיצובי" אבל בלתי קריא עבור אנשים עם ליקויי ראייה.
הדרישה:
- טקסט רגיל: ניגודיות מינימלית של 4.5:1
- טקסט גדול (18px+ bold או 24px+): ניגודיות מינימלית של 3:1
- אלמנטים אינטראקטיביים (כפתורים, שדות): 3:1
3 אין ניווט מקלדת
אנשים עם מוגבלות מוטורית לא יכולים להשתמש בעכבר. הם מנווטים באמצעות Tab, Enter ו-Escape. אם האתר שלכם לא תומך בזה - הם פשוט לא יכולים להשתמש בו.
הבעיות הנפוצות:
- אין פוקוס נראה: הדפדפן מסמן את האלמנט הנוכחי, אבל עיצובים רבים מסתירים את זה עם
outline: none - אין "דלג לתוכן": קישור שמאפשר לדלג על התפריט ולהגיע ישירות לתוכן
- תפריטים שלא נפתחים: תפריטי dropdown שעובדים רק עם hover
- מלכודות מקלדת: מודלים (pop-ups) שלא ניתן לסגור עם Escape
:focus { outline: 2px solid #000; } ו-<a href="#main" class="skip-link">דלג לתוכן</a>.
4 טפסים ללא תוויות (Labels)
טפסי הרשמה, התחברות, וצור קשר ללא תוויות HTML תקניות הם בעיה נפוצה. placeholder לבד לא מספיק - הוא נעלם ברגע שמתחילים להקליד.
דוגמה לטפס בעייתי:
<input type="email" placeholder="אימייל"> - אין label!
למידע נוסף, בקרו ב-AI בקלות.
למידע נוסף, בקרו ב-מדריך AI.
דוגמה לטפס נגיש:
<label for="email">אימייל</label>
<input type="email" id="email" placeholder="[email protected]">
for="id", או לחלופין aria-label="תיאור". הוסיפו גם הודעות שגיאה ברורות עם aria-describedby.
5 מבנה כותרות שגוי
כותרות (h1-h6) הן לא רק עיצוב - הן מבנה. קוראי מסך משתמשים בכותרות כדי לנווט בדף. כשהמבנה שגוי, הניווט נשבר.
טעויות נפוצות:
- יותר מ-h1 אחד בדף
- דילוג על רמות (h1 → h3 בלי h2)
- שימוש בכותרות לעיצוב במקום למבנה
- טקסט שנראה ככותרת (bold + גדול) אבל הוא p ולא h2
איך לגלות את כל הטעויות באתר שלכם?
בדיקה ידנית של כל עמוד לוקחת שעות. הפתרון: כלים אוטומטיים שסורקים את האתר ומזהים בעיות.
- בדיקה בסיסית (חינם): axe DevTools, WAVE, Lighthouse
- בדיקה מקצועית: Ziko סורק 28+ תקנות ישראליות ומייצר דוח מפורט
- תיקון אוטומטי: Ziko A11y סורק עם AI ומתקן בעיות בקוד אוטומטית
סיכום: נגישות זה לא רק חוק, זה עסק טוב
20% מהאוכלוסייה מתמודדת עם מוגבלות כלשהי. אתר נגיש פותח את הדלת ל-20% יותר לקוחות פוטנציאליים. בנוסף, נגישות משפרת SEO (גוגל מעדיף אתרים נגישים), חווית משתמש, ומגינה מתביעות.
התחילו עם צ'קליסט נגישות בסיסי, ושקלו פתרון אוטומטי מבוסס AI לטיפול מקיף.