אולי כבר שמעתם על זה משהו, אולי אתם מדחיקים ואולי עדיין לא יודעים בכלל, אבל בסוף שנת 2020 ייכנס לתוקפו חוק הנגשת אתרים, המחייב כל אתר להיות נגיש לבעלי מוגבלויות.
כדאי להתכונן לקראת זה ולהפנים את החוקים. רובם מוכרים וקיימים בהדרכות שלי כבר מזמן, אבל חשוב לבדוק ולוודא שהאתר הישן או החדש שלכם עומד בדרישות ונגיש כראוי.
עבור מי אנחנו מנגישים את האתרים? עבור אוכלוסיות של בעלי מוגבלויות כגון - עוורים, לקויי ראיה, אנשים עם מוגבלות מוטורית בידיים המונעת מהם להשתמש בעכבר, אנשים עם לקות שמיעה. בישראל כ20-25% מהאוכלוסיה נכללת בקהל זה! מהו אתר נגיש? אתר התומך בתוכנות שונות המסייעות לבעלי מוגבלויות, כגון תוכנות המקריאות מסכים, אתר המאפשר ניווט באתר ע״י מקלדת ולא רק ע״י עכבר, אתר שבנוי בצורה הגיונית וברורה ומנגיש את המידע בצורה קלה לגולש, אתר המשתמש בכתוביות ובאמצעי המחשה שונים כדי להנגיש את המידע. הקלות ודרגות חומרה בהנגשת האתר: ישנן שתי דרגות חוק המתייחסות להנגשת האתרים- אתרים ציבוריים המעניקים שירות או מידע לציבור - נדרשים לעמוד בקטגוריה הנקראת AA אתרים שאינם ציבוריים - נדרשים לעמוד בקטגוריה A עם אפשרות להקלות בדרישות. (סעיף 19יב לחוק) במידה והמערכת עליה בנוי האתר אינה תומכת בחלק מהדרישות אפשר לצרף מכתב מבעלי המערכת המאשרת את מוגבלותה. אז איך להנגיש את האתר שלכם? 1. טקסט חלופי לתמונות. בכל מערכת בסיסית קיימת האפשרות להכניס תיאור תמונה (alt), יש למלא את כל השדות הטקסטואליים המתלווים להגדרות התמונות והכפתורים באתר. ממליצה לעבור על כל התמונות שבאתר שלכם ולהכניס כבר עכשיו את התיאורים האלו. בנוסף להנגשה יהיה לכם יתרון אדיר בקידום בגוגל. 2. וידאו ואודיו במידה ויש סרטונים באתר שלכם יש להוסיף להם כתוביות שיהיו מסונכרנות עם התוכן כמובן. בנוסף, רצוי שיופיע באתר גם קובץ שמע של הוידאו שיופיע בנפרד. נגן הוידאו או השמע צריך להיות נגיש ובולט אף הוא עם טקסט חלופי לכפתוריו. 3. מבנה, קשרים ורצף כמו שתמיד הנחיתי את לקוחותיי, חשוב מאוד שתופיע היררכיה וסדר חשיבות באתר. הקשרים בין המוצרים או האלמנטים השונים שמופיעים שם חייבים להיות ברורים לגולש. מה חשוב יותר ומה פחות. מי קשור למי ומשלים אותו. חשוב שהגולש יבין מה היחסים בין האלמנטים השונים באתר ובעמוד. 4. שימוש בכותרות בהמשך לסעיף הקודם - יש להשתמש בכותרות על מנת לבדל או לקשר אלמנטים שונים ולעשות סדר. הכותרות צריכות להיות מסומנות כ h1-h6 (בכל מערכת יש אפשרות לסמן טקסט ולבחור שיהיה אחת מהכותרות האלו). כותרת h1 תופיע פעם אחת בלבד בכל עמוד ותהיה הכותרת הראשית. אחריה ניתן להשתמש בכותרות h2 והלאה בסדר החשיבות. חשוב להקפיד על רווח מסויים בין הכותרת לפסקה או האלמנט שיופיע אחריה.
5. אפשרות לשינוי התצוגה ע״י המשתמש במידה והמערכת שלכם יכולה לאפשר לגולש להגדיל את הפונטים בעצמו (כמו באתר ynet למשל) חשוב להשתמש באפשרות זו. באופן עקרוני כל הדפדפנים החדשים (כרום, ספארי, מוזילה) מאפשרות לגולש להגדיל את המסך אבל אז נוצרת לרוב גלילה רוחבית. יש לשים לב שהטקסטים לא נעלמים או מוסתרים כשהגולש מגדיל את האתר. 6. פונטים הפונטים באתר חייבים להיות ברורים ונקיים. הגודל המינימלי הוא 12. עדיף אפילו מעט גדול יותר. חשוב להקל ככל הניתן על הגולש לקרוא באתר. חשוב לשמור על ניגודיות טובה בין הטקסט לרקע שעליו הוא יושב. רצוי לא לשים תמונות מאחורי טקסטים. חשוב לשמור על אחידות בפונטים מבחינת גודל, צבע וסוג פונט לכל סוג טקסט המופיע באתר, ולא להשתמש במגוון רחב מידי. 7. שימוש מקלדת במקום בעכבר חשוב לוודא שהאתר ניתן לתפעול גם עם מקלדת בלבד באמצעות שימוש בלחצן tab ובחיצים. רוב המערכות הקיימות היום מאפשרות שימוש במקלדת, אולם חשוב לוודא ולראות כיצד האתר שלכם מתפקד שם. במידה ונוצר בלגן בשימוש בלחצן הtab, חשוב לסדר את האלמנטים בסדר נכון והגיוני כך שהמעבר יהיה נכון ורציף. 8. עקיפת בלוקים חשוב לאפשר לתוכנות המקריאות מסכים לדלג מעל ״בלוקים״ שחוזרים על עצמם או לא רלוונטים באתר. למשל באנר שחוזר על עצמו בכל העמודים או דילוג על התפריט כדי להגיע לתוכן. הדרך הכי טובה לעשות זאת היא ע״י שימוש בקישורים ביופיעו בראש העמוד ויובילו לתכנים החשובים שבתוכו (שימוש בפקודת anchor / עוגן). חשוב להשתמש גם בקיצורי דרך כמו ״לתחילת העמוד״ שיוביל לראש העמוד. 9. המנעות מהגבלת זמן ישנם אתרים המגבילים את זמן מילוי הטופס או התגובה. ישנם אתרים עם חדשות או תוכן הנע מהר מידי. חשוב לשים לב להמנע מהגבלת זמן, או לאפשר לגולש להאריך את מגבלת הזמן. במידה ויש לכם עדכונים או חדשות באתר יש לשים לב שהן ניתנות לעצירה במעבר עכבר עליהן ומאפשרות לגולש לקרוא את התוכן בקצב שלו. 10. המנעות מטקסטים המופיעים כתמונה כדי לאפשר לתוכנות הקראת המסך לעבוד כראוי יש להמנע ככל האפשר מטקסטים שמופיעים כתמונה ולא כטקסט חי. במידה ובכל זאת ישנם טקסטים המופיעים בתמונות יש לשים לב למלא את תיאורי התמונה והalt כפי שהסברתי בסעיף הראשון. 11. טפסים חשוב מאוד לשים טפסים פשוטים וברורים ככל האפשר. לשים לב שניתן למלא אותם מכל דפדפן או מסך (כולל נייד). חשוב לשים לב שיש קשר וקרבה בין השדה לטקסט הנלווה אליו. חשוב לשים לב שבמידה וישנם שדות חובה למילוי הן יצויינו עם כוכבית. במידה והמערכת מאפשרת כדאי שהטופס יישלח גם במידה ושדה החובה לא מולא. הודעות תודה או שגיאה צריכות להיות ברורות. במידה וניתנה הודעת שגיאה חשוב שמהות השגיאה תצויין וכן כיצד ניתן לפתור אותה. במידה וקיים טופס ארוך באתרכם חשוב שהשדות יופיעו בסמיכות ועם קשר הגיוני בינהם. 12. טבלאות חשוב להמעיט בשימוש בטבלאות באתר. לרוב הן משתבשות בתוכנות ההקראה או בתצוגה בנייד. במידה ובכל זאת קיימת טבלה באתרכם חשוב שיהיה ברור הקשר בין הכותרות לתוכן התאים. 13. התמצאות באתר כותרת h1 אחת בכל עמוד, ברורה ומדוייקת וקשורה לתוכן העמוד. חשוב שיופיע סרגל ניווט בעמודים שיאפשר לגולש לדעת היכן הוא נמצא ביחס לאתר ולעמוד הבית. שימוש בpage title מדוייק ותואם לתוכן העמוד. ההגדרות שלו נמצאות בהגדרות העמודים במערכת. 14. תפריטים חשוב לשמור על תפריטים ברורים, נקיים ומדוייקים. חשוב שהכפתורים יופיעו בסדר הגיוני ובסמיכות שתגדיר את הקשרים והקרבה בינהם. חשוב לוודא שניתן להפעיל את התפריט בעזרת המקלדת (tab). במידה וזה אינו אפשרי יש לדאוג לקבלת אישור ממפעילי המערכת. 15. לינקים וקישורים חשוב לשים לב לרשום בקישור את תוכן ומטרת הקישור ולא סתם ״לפרטים נוספים״ או ״לחצו כאן״. כלומר יש לרשום ״להמשך קריאת המאמר בנושא ....יש ללחוץ כאן״. הלינקים צריכים להיות נבדלים משאר הטקסט לפחות בצבע ובקו תחתון (צבע לבד אינו מספיק - ישנם עיוורי צבעים...). במידה והקישור הוא תמונה יש להוסיף תיאור תמונה כמתואר בסעיף הראשון. 16. הודעות שגיאה במידה ויש לכם שליטה על הודעות השגיאה של המערכת יש לשים לב שמהות השגיאה מצויינת באופן ברור וכן הוראות כיצד לתקנה. ההנחיות צריכות להיות ברורות ומדוייקות ולא כלליות.
בוויקס למשל יש אפשרות לערוך את עמוד 404 ולעצב אותו בצורה ידידותית.
17. הגדרת שפה חשוב לוודא שמוגדרת שפה ראשית ועיקרית באתר. זה משהו שקורה אוטומטית בוויקס, אבל לרוב מוגדר כאנגלית. אם האתר שלכם בעברית תכנסו להגדרות הכלליות של האתר ושם בGeneral Settings בחרו בעברית.
18. עבודה לפי תקנים התאמה למסכים שונים, נגישות לגוגל, התאמה לדפדפנים- עמידה בתקנים הסטנדרטיים של כל אלו תאפשר לאתר שלכם להיות נגיש לגמרי. דגשים למעצבי אתרים
חשוב לזכור שהנגישות קודמת לעיצוב ואם ישנה התלבטות בין עיצוב לעמידה בנגישות- הנגישות תנצח:)
חשוב מאוד לעצב את האתר בצורה היררכית - במידע, בקשרים וביחסים בין האלמנטים השונים, להקפיד על נושאים ראשיים ומשניים
תפריטים ברורים וקלים לתפעול, עדיף כטקסטים ולא כתמונות
שימוש במראה מקום בכל עמוד
שימוש באמצעי איתור - תיבת חיפוש, מפת אתר, תגיות, רשימת קישורים ועוד.
עדיפות לקישורים טקסטואליים על פני תמונות
הדגשת קישורים לפחות בצבע ובקו תחתון
שימוש ברווחים כדי להפריד איזורים ונושאים באתר
להקפיד על עיצוב נקי! להמנע מרקעים לא אחידים, רקעים לטקסטים, אנימציות רעשניות, עודף קווים ומסגרות, עודף אלמנטים גרפיים, תנועה רבה מידי, סאונד פתאומי.
לשמור על עקביות בשפת העיצוב
לסיכום! רשימה ארוכה ומייגעת, אכן כן... אבל החדשות הטובות הן שרוב האתרים כבר עומדים לפחות ב50% מהתנאים. רוב המערכות מאפשרות לכם לסדר ולתקן את מה שצריך. חשוב מאוד לשים לב שכל עמוד או תוכן חדש שנוסף לאתר כבר יהיה נגיש ומותאם מראש. אלו הרגלים חדשים שכדאי לאמץ אבל יטמעו מהר, אל דאגה:) המידע נלקח מאתר איגוד האינטרנט הישראלי וניתן לקרוא עוד על נגישות אתרים בקישורים הבאים:
מקווה שעזרתי לפזר קצת את הערפל! אשמח אם תשתפו את העמוד הלאה למי שהמידע עשוי להועיל לו.
בהצלחה! עדי לראש העמוד לחצו כאן