שלושת המכשולים המרכזיים שמכשילים גולשים באתר הם ניגודיות צבעים חלשה שמקשה על קריאת המידע, כפתורים ללא שם ברור שמבלבלים את מי שנעזר בהקראה קולית או גולש בחיפזון, וכן טפסים מורכבים שלא מסבירים במילים ברורות היכן חלה שגיאה. מכשולים אלה גורמים לגולשים לוותר על רכישה, יצירת קשר או קריאת מידע חיוני. במאמר זה נבין את שורש הבעיה של כל מכשול, נכיר את הפתרון הפשוט שמחזיר את הגולשים, ונלמד כיצד בדיקה בסיסית יכולה לפתוח את האתר עבור כולם.
נגישות דיגיטלית היא התאמת האתר כך שכל אדם, ללא תלות בחושיו, ביכולותיו המוטוריות או במכשיר שבאמצעותו הוא גולש, יוכל להבין את התוכן ולבצע פעולות באופן עצמאי ומכבד. כאשר אתר אינו נגיש, הוא לא רק מציב מחסום בפני אנשים עם מוגבלות קבועה, אלא גם פוגע במי שגולש מול שמש חזקה, בהורה שמחזיק תינוק ביד אחת, או באדם מבוגר שהרכיב משקפי קריאה.
להלן שלושת הכשלים הנפוצים ביותר, הדרך שבה הם פוגשים את האנשים האמיתיים מאחורי המסך, והצעדים המעשיים לתיקונם.
—
1. ניגודיות צבעים חלשה: כשהעיצוב מונע מהעיניים לקרוא
אחד המאפיינים העיצוביים הפופולריים בשנים האחרונות הוא שימוש בגוונים עדינים: אפור בהיר על גבי רקע לבן, תכלת פסטל על גבי אפור בהיר, או כיתוב דק המונח ישירות על גבי תמונה עמוסה. עבור מעצב עם מסך מקצועי ומכויל בחדר מוצל, התוצאה עשויה להיראות אלגנטית ומודרנית. עבור הגולש הממוצע, מדובר במאמץ ראייה מתמיד.
כאשר הניגודיות בין צבע האות לבין צבע הרקע נמוכה מדי, אנשים רבים פשוט מפסיקים לנסות לקרוא. הדבר פוגע באנשים עם לקויות ראייה שונות, באוכלוסייה מבוגרת שאיבדה חלק מחדות הראייה הטבעית, וגם בכל אדם שמנסה לקרוא את האתר בטלפון הנייד בזמן הליכה ברחוב מואר. לפי קווים מנחים לנגישות תוכן אינטרנט של ארגון W3C, קיים יחס ניגודיות מספרי מדויק המבטיח שהאותיות יישארו ברורות ומובחנות מול הרקע עבור כל עין אנושית.
כדי לתקן זאת, אין צורך לוותר על שפה עיצובית עשירה או להפוך את האתר לשחור-לבן. הפתרון דורש התאמה של גווני הטקסט:
- הכהיית טקסטים בהירים: בחירה בגוון אפור כהה יותר, פחם או שחור עבור טקסט רץ.
- הפרדה בין טקסט לתמונה: הוספת שכבת רקע כהה ואטומה למחצה מתחת לטקסט שמונח על גבי תמונות או סרטונים.
- הגדלת המשקל של הגופן: גופן דק מדי מקשה על זיהוי האות גם כאשר הצבע כהה; משקל בינוני או רגיל מקל על העין באופן מיידי.
—
2. כפתורים עיוורים: מדוע קישורים לא ברורים מרחיקים לקוחות מפעולה
חשבו על המצב הבא: אתם מגיעים לדף הבית של שירות מסוים, ומולכם חמישה כפתורים שעל כולם כתוב "לחץ כאן", "למידע נוסף" או סמל של חץ ללא שום מילה כתובה. עבור מי שרואה את כל המסך ויכול להסיק מסקנות מההקשר הכללי, המשימה אולי אפשרית, אם כי עדיין דורשת ריכוז מיותר. אך עבור מי שגולש באמצעות תוכנת הקראה קולית (קורא מסך), המצב הופך לבלתי אפשרי.
תוכנות אלו מאפשרות למשתמשים עיוורים או כבדי ראייה לקבל רשימה של כל הקישורים והכפתורים בעמוד כדי לנווט ביניהם במהירות. כאשר התוכנה מקריאה ברצף: "לחץ כאן, לחץ כאן, לחץ כאן, כפתור", הגולש אינו יודע איזה קישור יוביל למחירון, איזה להורדת קובץ ואיזה יחייב את כרטיס האשראי. כפי שהסברנו במאמר על מה הכפתור שלכם באמת אומר: בדיקת הנגישות שחושפת איך נשמע דף הבית, מילים שאינן עומדות בפני עצמן מנתקות את חוט הגלישה.
בנוסף, כפתורים שמבוססים על אייקונים בלבד — כגון עגלת קניות, זכוכית מגדלת לחיפוש או אייקון של טלפון — מיושמים לעיתים קרובות בלי תיאור טקסטואלי חבוי בקוד. במצב כזה, קורא המסך פשוט מדלג עליהם או מקריא רצף מספרים חסר פשר. כדי לפתור זאת, נקטו בשני כללים ברורים:
- החליפו טקסט כללי בשם הפעולה המדויק: במקום "פרטים נוספים", כתבו "קראו עוד על חבילות השירות שלנו".
- ודאו שלכל כפתור מבוסס אייקון יש תווית טקסטואלית ברורה המתארת את ייעודו.
—
3. טפסים מתסכלים: איך תיקון שגיאות לקוי מונע השלמת פניות
הטופס הוא נקודת המפגש הקריטית שבה מבקר באתר הופך ללקוח. דווקא שם מתרחשות רבות מעוגמות הנפש הגדולות ביותר ברשת. מחקרים רחבי היקף, כדוגמת פרויקט המיליון של ארגון WebAIM, מראים כי שדות טופס ללא תוויות ברורות ושגיאות במנגנוני שליחה הם מליקויי הנגישות הנפוצים ביותר ברשת העולמית.
חוסר הסבר מילולי לשדות חובה
המכשול מתחיל באופן שבו שדות הטופס מעוצבים. מעצבים רבים בוחרים להציב את שם השדה בתור טקסט רמז חלש (Placeholder) בתוך תיבת הקלט עצמה, במקום ככותרת קבועה מעליה. ברגע שהמשתמש מתחיל להקליד, ההנחיה נעלמת. אם אדם מוסח לרגע, הוא שוכח מה התבקש להזין. עבור מי שמסתייע בהגדלת טקסט או בקורא מסך, טקסט רמז כזה לעיתים קרובות אינו מוקרא כלל.
התרעת שגיאה בצבע בלבד
הבעיה השנייה היא תהליך השגיאה. משתמש לחץ על "שליחה", אך הטופס לא נשלח. מה קרה? מסגרת של אחד השדות נצבעה באדום דק, ללא שום הודעה כתובה. אדם עם עיוורון צבעים או לקות ראייה לא יבחין בשינוי הגוון כלל. יתרה מזאת, במערכות ישנות רבות, הטופס מרענן את הדף ומוחק את כל הנתונים שכבר הוקלדו, דבר שגורם למרבית הגולשים לסגור את הלשונית ולעזוב לתמיד.
החוויה הזו אינה משפיעה רק על גולשים עם צרכים מיוחדים. כפי שתואר במאמרנו שמסביר כיצד אתר נגיש פשוט נוח לכולם: השיעור שלמדנו מגלישה ביד אחת באוטובוס, טופס שלא סולח על שגיאות קטנות מתסכל כל אדם שמנסה להזמין שירות תוך כדי נסיעה מטלטלת.
—
השוואה: החוויה החוסמת מול החוויה המזמינה
ההבדל בין אתר שמציב מכשולים לבין אתר שמקבל את כל הגולשים בסבר פנים יפות מסתכם לעיתים קרובות בשינויים עדינים אך מהותיים:
| רכיב באתר | החוויה החוסמת (מרחיקה לקוחות) | החוויה המזמינה (נגישה לכולם) |
|---|---|---|
| צבעי כיתוב ורקע | אפור בהיר על רקע לבן, טקסט צהוב על תכלת, אותיות ללא ניגודיות מספקת. | צבע כהה ומובהק מול רקע בהיר, העומד בתקני ניגודיות ומאפשר קריאה קלה בכל תאורה. |
| קישורים וכפתורים | מילים כלליות כמו "לחץ כאן" או כפתורי סמלים ללא הסבר טקסטואלי לקורא מסך. | ניסוח ברור כמו "להרשמה לוובינר", לצד שמות מוגדרים היטב לכל אייקון. |
| הודעות שגיאה בטפסים | סימון שדה במסגרת אדומה בלבד ללא טקסט, או איפוס כל המידע שהוקלד. | הודעה כתובה וברורה מעל השדה: "נא להזין כתובת דוא"ל תקינה", תוך שמירה על הנתונים. |
| ניווט במקלדת | חוסר יכולת לעבור בין רכיבים באמצעות מקש המקלדת ללא עכבר. | מסגרת פוקוס ברורה ובולטת שמראה לגולש בדיוק היכן הוא נמצא בכל רגע. |
כדי להבין היכן האתר שלכם עומד מול פרמטרים אלה, מומלץ להכיר מה אנחנו בודקים בעת הערכת נגישות מקיפה של דפי אינטרנט.
—
צעד ראשון לבדיקה: עשר שניות שיגלו לכם המון
אינכם צריכים להיות מפתחי תוכנה או מומחי עיצוב כדי לאתר את המכשולים הללו באתר שלכם. אחת הבדיקות היעילות ביותר אינה דורשת התקנת שום תוכנה: הניחו את עכבר המחשב בצד, ונסו להשתמש במקש ה-Tab במקלדת כדי לעבור בין הכפתורים, הקישורים והטפסים בדף הבית שלכם.
האם אתם רואים קו סימון ברור סביב הפריט שבו אתם עומדים? האם אתם מצליחים לפתוח את התפריט הראשי ולמלא את טופס יצירת הקשר מבלי לגעת בעכבר? בדיקה זו, שפורטה במדריך שלנו על מקש אחד שמשנה הכל: בדיקת מקלדת פשוטה של עשר שניות לאתר שלך, תמחיש לכם מיד כיצד חווים את האתר אנשים שמנווטים ללא עכבר מסיבות מוטוריות או טכנולוגיות.
פתרון שלושת המכשולים הללו אינו דורש בנייה מחדש של האתר או השקעות ענק. הוא דורש מודעות, תשומת לב לפרטים ורצון אנושי לפתוח את הדלת לכל אדם שמבקש להיכנס.
אם אתם רוצים לדעת בוודאות כיצד דף הבית שלכם נראה ונשמע עבור כלל הגולשים, נשמח לעזור לכם לגלות זאת. אנו מזמינים אתכם לבקר באתר של Accessibility ולקבל בדיקה ראשונית וידידותית לדף הבית שלכם, שתראה לכם בדיוק היכן ניתן לשפר ולהקל על המבקרים שלכם כבר היום.
—
שאלות נפוצות
האם הנגשת האתר דורשת עיצוב מחדש של כל האתר מהיסוד?
ממש לא. ברוב המקרים, הנגשה אינה מחייבת שינוי כולל של המבנה החזותי. מדובר בהתאמות ממוקדות: חיזוק ניגודיות הצבעים של הטקסט, הגדרת שמות ברורים לכפתורים קיימים, והוספת הנחיות טקסטואליות לצד שדות טופס. שינויים אלה משתלבים באופן טבעי בעיצוב הקיים ומשפרים את השימושיות הכללית עבור כל המשתמשים.
איך אדע אם צבעי הטקסט באתר שלי עומדים ברמת הניגודיות הנדרשת?
קיימים כלים מקוונים חינמיים שבהם מזינים את קוד הצבע של הטקסט ואת קוד הצבע של הרקע, והכלי מחשב אוטומטית את יחס הניגודיות ביניהם. אם היחס עומד על 4.5:1 לפחות עבור טקסט רגיל, הניגודיות נחשבת לתקינה ומאפשרת קריאה נוחה למרבית האוכלוסייה, כולל באור יום מלא.
למה כפתורים כמו "לחץ כאן" או "קרא עוד" בעייתיים עבור גולשים?
ביטויים כלליים אינם מספקים הקשר לגולש. אנשים הנעזרים בתוכנות הקראה קולית מדלגים לעיתים ישירות בין כפתורים וקישורים כדי לאתר פעולה רצויה; כשהם שומעים שוב ושוב "לחץ כאן", אין להם דרך לדעת לאן הקישור מוביל. ניסוח ספציפי כמו "לצפייה בקטלוג המוצרים" מעניק עצמאות וביטחון בגלישה.
האם שיפור הנגישות משפיע גם על משתמשים ללא מוגבלות מוגדרת?
בהחלט. נגישות משפרת את חוויית המשתמש עבור כולם. ניגודיות טובה מקלה על קריאה במסכים קטנים או תחת אור שמש ישיר, טפסים מפורטים מונעים תסכול וטעויות הקלדה, והיררכיה ברורה של כפתורים מאפשרת לכל לקוח למצוא את מבוקשו במהירות ובקלות רבה יותר.