הנגשת האתר לבעלי ראייה חלשה – ניגודיות צבעים, שינוי גדלי פונט ועוד

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

ניגודיות צבעים

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

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

שימו לב:

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

הגדלת פונט

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

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

מה עוד?

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

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

אופן המימוש

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

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

ניגודיות גבוהה

ראשית – נכין CSS ייעודי למצב של ניגודיות גבוהה, כך שכל ההגדרות הן רק כאשר יש לhtml את הקלאס accessibility_mode. לדוגמה:

.accessibility_mode *{ 
    background-color: black !important;
    color: yellow !important;
}
.accessibility_mode a:hover, .accessibility_mode a:focus{
    outline: 3px solid yellow !important;
}

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

באמצעות קוד JS נגדיר שלחיצה על הכפתור הזה מבצעת 2 פעולות:

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

לדוגמה (עם שימוש בjQuery) – קוד ששומר סשן.

jQuery('#accessiblity_btn').on('click', function(e){
    e.preventDefault(); // נחוץ במידה ומדובר בתגית קישור ולא תגית כפתור
    if(jQuery('html').is('.accessibility_mode')){ 
        // בדיקה אם כבר נמצאים במצב ניגודיות גבוהה ורוצים לצאת ממנה
        jQuery('html').removeClass('accessibility_mode'); // הסרת הקלאס מהעמוד
        sessionStorage.setItem("accessibility_mode", "no"); // שינוי ההגדרה בסשן
    } else {
        // במידה ונכנסים למצב ניגודיות גבוהה
        jQuery('html').addClass('accessibility_mode'); // הוספת הקלאס לעמוד
        sessionStorage.setItem("accessibility_mode", "yes"); // שינוי ההגדרה בסשן
    }
}

בשלב הזה – כל מה שנשאר לנו לעשות, זה בקוד בצד שרת, להגדיר לHTML את הקלאס accessibility_mode במידה ושמור סשן בשם accessibility_mode עם הערך yes. לדוגמה בקוד PHP זה ייראה כך:

$class = isset($_SESSION['accessibility_mode']) && $_SESSION['accessibility_mode'] == 'yes' ? 'accessibility_mode' : '';

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

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

הגדלת והקטנת פונט

הדרך הפשוטה ביותר תהיה במידה ובתהליך פיתוח האתר תשתמשו בערכים em או rem כדי להגדיר את גדלי הפונט. באופן הזה כאשר נרצה להגדיל או להקטין את הפונט בעמוד – כל מה שנצטרך לעשות זה להגדיל ולהקטין את הגדרת הfont-size של הroot של הDOM – האלמנט html.

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

מצד שני – מאד קשה לפתח אתר שלם כאשר נקודת המוצא של rem היא 16 פיקסלים, שזה לא מספר עגול, ואז כל הגדרת גודל תצטרכו לחשב כמה rem לתת – במקום זה – יש את הטריק המקסים הזה ראיתי באתר css tricks:

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

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

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