→ חזרה לבלוג

10 טעויות נפוצות בהנגשת אתרים - ואיך לתקן אותן

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

טעות 1: תמונות ללא טקסט חלופי (alt text)

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

איך לתקן: הוסיפו תכונת alt לכל תמונה באתר. הטקסט צריך לתאר את התוכן או הפונקציה של התמונה בצורה תמציתית. למשל, במקום <img src="team.jpg"> כתבו <img src="team.jpg" alt="צוות מנגיש - חמישה אנשים יושבים סביב שולחן במשרד">. לתמונות דקורטיביות שלא מעבירות מידע, השתמשו ב-alt="" ריק כדי שקורא המסך ידלג עליהן.

טעות 2: ניגודיות צבעים לא מספקת

טקסט אפור בהיר על רקע לבן עשוי להיראות מעוצב ומודרני, אבל הוא בלתי קריא עבור אנשים רבים - לא רק אלה עם לקויות ראייה, אלא גם אנשים שמשתמשים בטלפון באור שמש חזק. תקן WCAG דורש יחס ניגודיות מינימלי של 4.5:1 לטקסט רגיל ו-3:1 לטקסט גדול.

איך לתקן: השתמשו בכלי בדיקת ניגודיות כמו WebAIM Contrast Checker. הזינו את צבע הטקסט ואת צבע הרקע ובדקו אם היחס עומד בדרישות. אם לא, כהו את הטקסט או בהירו את הרקע עד שתגיעו ליחס הנדרש. סרגל הנגישות של מנגיש כולל מצב ניגודיות גבוהה שעוזר למשתמשים שזקוקים לכך.

טעות 3: חוסר תמיכה בניווט מקלדת

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

איך לתקן: ודאו שכל האלמנטים האינטראקטיביים (קישורים, כפתורים, שדות טופס) ניתנים למיקוד עם מקש Tab. אל תסירו את מסגרת המיקוד (outline) ב-CSS - זהו סימן חיוני למשתמשי מקלדת. אם יש לכם אלמנטים אינטראקטיביים מותאמים (custom), הוסיפו tabindex="0" ומטפלי מקלדת מתאימים.

טעות 4: טפסים ללא תוויות (labels)

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

איך לתקן: הוסיפו תגית <label> לכל שדה קלט, עם תכונת for שמתאימה ל-id של השדה. למשל: <label for="email">כתובת אימייל</label><input type="email" id="email">. אם מסיבות עיצוביות אתם לא רוצים להציג את התווית, השתמשו ב-CSS כדי להסתיר אותה ויזואלית תוך שמירה על נגישות.

טעות 5: מבנה כותרות לא נכון

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

איך לתקן: השתמשו ב-H1 פעם אחת בדף לכותרת הראשית. תחתיו H2 לסעיפים ראשיים, H3 לתתי-סעיפים וכן הלאה. אל תדלגו על רמות (למשל מ-H2 ישר ל-H4). אם אתם צריכים שינוי בגודל הגופן, השתמשו ב-CSS ולא בשינוי רמת הכותרת.

טעות 6: קישורים עם טקסט לא מתאר

"לחצו כאן", "קראו עוד", "עוד" - קישורים כאלה לא אומרים שום דבר כשהם נקראים מחוץ להקשר. משתמשי קורא מסך יכולים להציג רשימת קישורים של הדף, ואם כל הקישורים אומרים "לחצו כאן", אין שום דרך לדעת לאן כל אחד מהם מוביל.

איך לתקן: כתבו טקסט קישור שמתאר את היעד. במקום "לחצו כאן כדי לקרוא את המדריך", כתבו "קראו את מדריך הנגישות המלא". אם מסיבות עיצוביות אתם חייבים טקסט קצר, הוסיפו aria-label עם תיאור מלא.

טעות 7: סרטונים ללא כתוביות

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

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

טעות 8: חלונות קופצים (pop-ups) לא נגישים

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

איך לתקן: כשחלון קופץ נפתח, העבירו את המיקוד אליו. ודאו שמקש Escape סוגר אותו. מנעו מהמשתמש לנווט ברקע כל עוד החלון פתוח (focus trap). כשהחלון נסגר, החזירו את המיקוד לאלמנט שפתח אותו. השתמשו ב-role="dialog" וב-aria-modal="true".

טעות 9: אנימציות והבהובים ללא אפשרות עצירה

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

איך לתקן: ספקו כפתור לעצירת כל אנימציה אוטומטית. הימנעו מהבהובים שמהבהבים יותר משלוש פעמים בשנייה. כבדו את הגדרת prefers-reduced-motion של המשתמש ב-CSS. הסרגל של מנגיש כולל אפשרות מובנית לעצירת אנימציות.

טעות 10: חוסר הצהרת נגישות

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

איך לתקן: צרו דף הצהרת נגישות שכולל: תאריך עדכון אחרון, רמת הנגישות שאליה אתם שואפים (WCAG 2.0 AA), הצעדים שנקטתם להנגשת האתר, בעיות ידועות שטרם תוקנו ודרכי יצירת קשר (טלפון ואימייל) עם אחראי הנגישות. קשרו את ההצהרה מכל דף באתר, בדרך כלל דרך הפוטר.

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

סיכום - מאיפה מתחילים?

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

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

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

מוכנים להתחיל? הירשמו למנגיש בחינם ותנו לכל המשתמשים שלכם לגלוש באתר בנוחות ובכבוד.