קשיי נגישות לפי מוגבלות

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

עיוורון

האתגר הפתרון
הגולשים אינם משתמשים בעכבר. תמיכה מלאה בהפעלת האתר באמצעות מקלדת.
אין אפשרות להשתמש בתמונות, בצילומים או בכל חומר גרפי אחר תיאורים מילוליים באמצעות תגי alt. בעת הצורך, יש להביא הסברים ארוכים יותר באותו עמוד או באמצעות קישור לעמוד אחר.
המשתמשים קופצים מקישור לקישור באמצעות המקש TAB. מתן שמות הגיוניים לקישורים, עם משמעות ברורה גם כשהם מחוץ להקשר ("לחץ כאן" או "לפרטים נוספים" הם שמות בעייתיים לקישורים, כי בלי הקשר לא ברור לאן הקישור מוביל).
המשתמשים צריכים ליצור רשימה מרוכזת של כתובות, שדות, קישורים וכדומה.
  • הקפידו שניסוח הכותרות יבהיר באופן חד-משמעי את מהות התוכן.
  • השתמשו בכותרות h1-h6 כדי להבהיר את ההיררכיה בין הכותרות.
  • תנו שמות ברורים לשדות ולקישורים.
המשתמשים אינם יכולים לראות את כל המסגרות (frames) בבת-אחת, אלא כל אחת מהן בנפרד. דבר זה עלול לגרום להם קשיים בניווט באתר. השתמשו במסגרות רק אם אתם חייבים. אם אתם משתמשים במסגרות, צרפו להן כותרות קומוניקטיביות שמבהירות את מטרתן (לדוגמה: "מסגרות ניווט", "תוכן ראשי"), והסבירו את היחסים בין המסגרות (ב-longdesc).
המשתמשים אינם יכולים להשתמש בטבלאות מורכבות שמעבירות מידע באמצעים חזותיים.
  • אל תשתמשו בטבלאות לצורך עיצוב – יש להעדיף Divs. השתמשו בטבלאות רק להעברת נתונים כגון שערי מט"ח, לוחות זמנים וכדומה.
  • בזמן ההאזנה לתוכן של תא כלשהו בטבלה, המשתמשים עלולים להתקשות בזיהוי המיקום של התא. לפיכך, קשרו כל תא לתאי הכותרת המתארים אותו, בטבלאות פשוטות השתמשו ב-TH להגדרת שורת הכותרת, בטבלאות מורכבות השתמשו ב-headers ID.
  • צרפו כותרות ותקצירים ו/או תיאורים טקסטואליים של תוכני הטבלאות.
המשתמשים אינם יכולים לתפוס דברים המסומנים בצבע. אל תשתמשו בצבעים בלבד כדי להעביר משמעות. השתמשו בקוד או בסימן גראפי עם alt. השתמשו בתגי שפת הקוד המיועדים לכך. למשל, השתמשו ב-H1 כדי להגדיר כותרת של מאמר בנוסף לצביעת הכותרת בצבע שונה מהצבע של שאר הטקסט, השתמשו ב-Strong כדי להדגיש טקסט.
הגולשים משתמשים בתוכנה שמקריאה להם את תוכן העמוד בצורה לינארית.
  • ודאו שהמבנה של האלמנטים השונים בקוד תואם את המיקום הלוגי שלהם במסך, כך תבטיחו שסדר ההקראה יהיה הגיוני.
  • הגדירו נכון את כיווניות העמוד והאלמנטים בעמוד (rtl / ltr)
  • אל תשתמשו ב"עברית חזותית" ("ויזואלית"). קשרו את ה-labels של התוויות בטפסים לשדה באמצעות label for.
  • קורא-המסך אינו קולט אלמנטים שמופיעים בעמוד כתוצאה מפעולה של המשתמש. יש להעביר אליהם את הפוקוס, או להשתמש בהגדרות ARIA.

לקות ראייה

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

עיוורון צבעים

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

חירשות ולקות-שמיעה

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

לקויות מוטורית

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

לקויות קוגניטיביות

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