מאז כניסת חוק הנגישות לתוקף בישראל, כל בעל אתר מחויב לוודא שהאתר שלו עומד בתקן הישראלי 5568 המבוסס על תקני WCAG 2.1 ברמה AA. אי עמידה בדרישות עלולה להוביל לא רק לקנסות כבדים, אלא גם לפגיעה באנשים עם מוגבלויות שזקוקים לגישה שווה לתכנים דיגיטליים. צ'קליסט נגישות מקיף הוא הכלי הראשון והחשוב ביותר לבדיקה עצמית ולזיהוי בעיות קריטיות. הנה 12 פריטים שחובה לבדוק באתר שלכם עכשיו.
1. טקסט חלופי (Alt Text) לכל התמונות
כל תמונה באתר חייבת לכלול תיאור טקסטואלי באמצעות תכונת alt. זה מאפשר לקוראי מסך להעביר למשתמשים עם לקויות ראייה את המידע הוויזואלי. בדקו שכל תמונה משמעותית מכילה תיאור רלוונטי ותמציתי, בעוד תמונות דקורטיביות מסומנות כ-alt="".
כדי לבדוק: השתמשו בכלי פיתוח הדפדפן (F12) ובדקו את תכונת alt של תגיות img, או השתמשו בהרחבות דפדפן ייעודיות לבדיקת נגישות כמו WAVE או Axe DevTools.
2. ניווט מלא באמצעות מקלדת בלבד
משתמשים רבים אינם יכולים להשתמש בעכבר ומסתמכים על מקלדת בלבד. בדקו שניתן להגיע לכל אלמנט אינטראקטיבי (קישורים, כפתורים, שדות טפסים, תפריטים) באמצעות מקש Tab וש-Enter או רווח מפעילים אותם.
- נסו לנווט באתר שלכם רק עם מקלדת, ללא עכבר
- וודאו שסדר המיקוד (focus order) הגיוני ועוקב אחר הזרימה הוויזואלית
- ודאו שהמיקוד הנוכחי מסומן בבירור עם מסגרת או הדגשה ברורה
3. ניגודיות צבעים מספקת
טקסט רגיל חייב ביחס ניגודיות של לפחות 4.5:1 ביחס לרקע, וטקסט גדול (18pt ומעלה או 14pt מודגש) חייב ביחס של 3:1 לפחות. זה קריטי עבור אנשים עם לקויות ראייה או עיוורון צבעים.
כלים מומלצים לבדיקה: WebAIM Contrast Checker, Colour Contrast Analyser, או כלי הנגישות המובנים ב-Chrome DevTools שמציגים בעיות ניגודיות בזמן אמת.
4. כותרות מסודרות היררכית (H1-H6)
מבנה כותרות הגיוני הוא חיוני לניווט של משתמשי קוראי מסך. כל עמוד חייב להכיל כותרת H1 אחת בלבד המתארת את תוכן העמוד, ואחריה כותרות H2-H6 בסדר היררכי ללא דילוגים.
אל תבחרו כותרת לפי העיצוב שלה אלא לפי החשיבות הסמנטית. אם צריך לשנות את העיצוב, השתמשו ב-CSS ולא בכותרת ברמה שגויה.
5. תוויות ברורות לשדות טפסים
כל שדה קלט בטופס חייב להיות מקושר לתווית טקסטואלית באמצעות תג label עם תכונת for, או להיות עטוף בתוך תג label. זה מאפשר לקוראי מסך לזהות את המטרה של כל שדה.
- ודאו שכל שדה קלט, תיבת סימון ו-radio button מקושרים לתווית
- השתמשו בהודעות שגיאה ברורות המקושרות לשדה הרלוונטי
- הוסיפו הוראות והנחיות נדרשות כחלק מהתווית או בתכונת aria-describedby
6. תוכן וידאו וקול עם כתוביות ותמלילים
לפי תקן 5568, כל תוכן וידאו חייב לכלול כתוביות סגורות (closed captions) בעברית, וכל תוכן אודיו חייב להיות מלווה בתמליל טקסטואלי. זה מאפשר גישה לאנשים חירשים או כבדי שמועה.
לוידאו מוקלט מראש, יש להוסיף גם תיאור אודיו (audio description) של אלמנטים ויזואליים חשובים שאינם מוסברים בדיבור.
7. קישורים עם טקסט תיאורי
הימנעו מטקסטים גנריים כמו "לחץ כאן" או "למידע נוסף". כל קישור חייב להיות מובן מתוך ההקשר שלו או מתוך הטקסט עצמו. משתמשי קוראי מסך לרוב עוברים על רשימת הקישורים באתר מחוץ להקשר.
דוגמה טובה: "קראו את המדריך המלא לנגישות אתרים" במקום "קראו עוד כאן".
8. הגדרת שפה ברמת העמוד והתוכן
יש להגדיר את שפת העמוד בתכונת lang בתג html (למשל lang="he" לעברית). אם יש תוכן בשפה אחרת בתוך העמוד, יש לסמן אותו בתכונת lang נפרדת. זה מאפשר לקוראי מסך לשנות את ההגייה והניבים בהתאם.
9. הימנעות מהבהובים ואנימציות מסוכנות
תוכן המהבהב יותר מ-3 פעמים בשנייה עלול לגרום להתקפים אפילפטיים. וודאו שהאתר אינו כולל אנימציות, GIF או וידאו המהבהבים במהירות גבוהה, ושכל אנימציה יכולה להיות מושהית או מושבתת.
שקלו להוסיף כפתור להשהיית אנימציות, או כבדו את העדפת prefers-reduced-motion של המשתמש ב-CSS.
10. אזורי ARIA Landmarks ותפקידים סמנטיים
השתמשו בתגים סמנטיים של HTML5 כמו header, nav, main, aside, footer, או בתכונות ARIA כמו role="banner", role="navigation", role="main". זה מאפשר למשתמשי קוראי מסך לדלג ישירות לאזורים רלוונטיים בעמוד.
ודאו שלכל עמוד יש אזור main אחד ברור המכיל את התוכן המרכזי, וכי אפשר לדלג על בלוקים חוזרים כמו תפריט ראשי.
11. מענה לטכנולוגיות עזר ומכשירים ניידים
האתר חייב להיות responsive ולתמוך בהגדלת טקסט עד 200% ללא אובדן תוכן או פונקציונליות. בדקו שהאתר עובד עם קוראי מסך פופולריים כמו NVDA, JAWS או VoiceOver, ושהוא שמיש במכשירים ניידים.
- בדקו שכפתורים ואלמנטים אינטראקטיביים גדולים מספיק (44x44 פיקסלים לפחות)
- ודאו שאפשר להגדיל טקסט דרך הגדרות הדפדפן
- נסו את האתר במכשירים ניידים שונים ובמצב לאנדסקייפ ופורטרט
12. הצהרת נגישות ואפשרות יצירת קשר
לפי החוק, האתר חייב לכלול הצהרת נגישות נגישה ובולטת המפרטת את רמת הנגישות של האתר, מועד הבדיקה האחרונה ודרכי יצירת קשר לקבלת סיוע או דיווח על בעיות נגישות. ההצהרה חייבת להיות זמינה מכל עמוד באתר.
סיכום ומה הלאה
צ'קליסט נגישות זה מכסה את הנושאים הקריטיים ביותר, אך בדיקת נגישות מלאה היא תהליך מקיף יותר. אחרי שבדקתם את 12 הפריטים הללו, מומלץ להריץ כלי בדיקה אוטומטיים, לבצע בדיקות ידניות מעמיקות ולשקול ביקורת נגישות מקצועית.
צריכים עזרה בהנגשת האתר שלכם? RITARGET מתמחה בבניית אתרים נגישים ובהנגשה של אתרים קיימים לפי תקן 5568 ו-WCAG 2.1. צרו איתנו קשר לקבלת ייעוץ ראשוני ללא התחייבות ונוודא שהאתר שלכם עומד בדרישות החוק ונגיש לכלל המשתמשים.
