עידן יצחקינגישות אתרים הוא אחד הדברים היותר חשובים והיותר מוחמצים ע"י מפתחי אתרים ואני אסבר מיד את הסיבה.
הפוסט הזה יהיה קצת חפירה אבל הוא סוג של מבוא והכרה ראשונית עם נגישות ולמה זה מאוד חשוב היום באתרים.
בישראל כמו בעוד הרבה מדינות מתקדמות אחרות עבר חוק הנגישות לאתרים, בישראל החוק פעיל כבר מאוקטובר 2017, עם זאת הוא מיושם במעט מאוד מקומות, בעיקר באתרים גדולים שיותר חשופים לתביעות מצד משתמשים.
עדיין זה לא אומר שלא כדאי להנגיש אתרים מקטנים ועד גדולים.
אז מה החוק אומר ?
לא משנה איפה האתר מתארח ולא משנה באיזה שפה הוא או מי הבעלים של האתר, אלא לאיזה קהל הוא פונה.
זה יכול להיות אתר שנמצא אצל ספק בחו"ל ושייך לחברה שממוקמת בחו"ל אבל אם הוא פונה לקהל הישראלי אז הוא מחויב בנגישות.
אם נדייק יותר, הוא מחוייב לפחות בפלטפורמה אחת נגישה (כמובן שיש כל מיני החרגות בחוק עבור סוגי אתרים שונים), אם לאתר יש גם אתר וגם אפליקציה נפרדת שיכולה לעשות כל מה שהאתר עושה, אז מספיק להנגיש אחד מהם.
לדוגמה: בגלל שיש חדשות ברדיו ובטלויזיה אין חובה להנגיש את האתרים, מפני שבעל מוגבלות יכול לקבל את השירות/מידע מערוצים אחרים.
ישנם 3 רמות נגישות בכל העולם: A, AA , AAA . בישראל כמו ברוב המוחלט של המדינות שהעבירו את החוק, הרמה שנבחרה היא AA.
אז מה יוצא לבעל האתר מנגישות:
- אתר נגיש הוא אתר שבעלי מוגבלות יכולים להשתמש בו – הגדלת כמות גולשים
- ניראה טוב, אחריות חברתית
- עמידה בחקיקה וראש שקט מתביעות
- SEO – מנועי החיפוש מעלים את הדירוג של אתרים מונגשים
את הפרטים לגבי החוק ניתן למצוא כאן: https://www.isoc.org.il – איגוד האינטרנט הישראלי.
מה הם 3 סוגי המוגבלויות העיקריים:
- מוגבלות בתנועה – לא ניתן להשתמש בעכבר, גלישת מקלדת בלבד
- עיוורון – לא ניתן להשתמש בעכבר, נעזר בקורא מסך
- אפילפסיה – היבהובים ותזוזות מהירות עלולות לגרום להתקף
ישנן מוגבלויות נוספות (בהם תוספי נגישות יכולים לטפל ביתר קלות)
- עיוורון צבעים – גוונים של אפור, אי הבדלה בין צבעים דומים (דורש ניגודיות גבוהה)
- לקות ראייה– מצריך גופנים גדולים
כלל אצבע
שימוש בתגיות על פי תפקידן המיועד עושה 70% מעבודת הנגישות ומקל את הפיתוח.
אני ממליץ לכל מפתח תוכנה/ אתר להתקין את אחת מהתוכנות הבאות על מנת לבדוק נגישות, מדובר בתוכנות הקראה שעיוורים משתמשים בהם:
- JAWS – בתשלום
- NVDA – חינם בצורה בסיסית, בשביל חבילות שפה צריך לשלם
התוכנות נשענות על תגיות ומאפיינים, כדי לתאר ולהסביר למשתמש מה קורה במסך, בהנחה כי המשתמש לא יכול לראות את המסך כלל.
מאפיינים עיקריים שצריך להכיר הם:
- Roles – הגדרת תפקיד התגית
- Aria – הגדרות מידע נוסף לתגית
- Img Alt – הגדרת טקסט חלופי ותיאור התמונה
- Label For – קישור של label לתגית אחרת
Roles
על ידי שימוש ב-roles ניתן להגדיר כל תגית כתגית אחרת, ההגדרה היא עבור קורא המסך ואינה נותנת את המאפיינים של התגית אותה הגדרנו.
לדוגמה: ניתן להגדיר span כ-כפתור, הוא לא יקבל את עיצוב ברירת המחדל של כפתור, או את היכולות של כפתור ולכן נצטרך להגדיר גם אותם.
יש מגוון גדול של roles, אבל המיוחדת והשימושית ביותר היא:
role=alert
כאשר המאפיין ניתן לתגית המוצגת על המסך בזמן עליית הדף, מלל התגית יוקרא מייד לאחר הקראת כותרת (title) הדף.
במידה והתגית לא נראית על המסך (display : none), בעת הופעתה, קורא המסך יקריא אותה.
Aria
אלו הם מאפיינים שתפקידם להוסיף מידע עבור מי שמשתמש בתוכנת הקראה, הם יכולים להיות הסברים לגבי:
שימוש ברכיב מסויים / מלל נוסף / מצב הרכיב / מצב התגית וכד'.
ישנם מספר מאפיינים פופולריים אשר מומלץ ונדרש להכיר על מנת לעזור למשתמשים בתוכנת ההקראה.
- Aria-checked
- Aria-expanded
- Aria-hidden
- Aria-label
- Aria-selected
- Aria-live
aria-checked
ערכים: true/false
מתי להשתמש:
כאשר משתמשים בכל תגית שהיא לא input מסוג checkbox אבל מתפקדת כך.
תוצאה:
מעדכן את קורא המסך במצב התגית (מסומן או לא מסומן).
דרישה:
יש צורך ב-JavaScript כדי לעדכן את ערך המאפיין בכל לחיצה.
aria-expanded
ערכים: true/false
מתי להשתמש:
כאשר לחיצה על התגית גורמת להרחבת או צימצום של איזור אחר במסך
כגון אקורדיון או תפריט.
תוצאה:
מעדכן את קורא המסך במצב האיזור המושפע (מורחב או מצומצם).
דרישה:
יש צורך ב-JavaScript כדי לעדכן את ערך המאפיין בכל לחיצה.
aria-hidden
ערכים: true/false
מתי להשתמש:
כאשר רוצים להחביא תגית מקורא המסך.
בדרך כלל משתמשים בה כאשר ישנה תמונה שרוצים התעלמות מצד קורא המסך,
או אזור לא נגיש, אשר לא ניתן להנגשה (בעוד שיש אזור אחר מונגש).
תוצאה:
קורא המסך יתעלם מהתגית וכל התוכן בתוכה.
דרישה: יש צורך ב-JavaScript כדי לעדכן את ערך המאפיין.
aria-label
ערכים: string
מתי להשתמש:
כאשר רוצים להוסיף מלל קצר המתאר את התגית עבור קורא המסך בלבד.
תוצאה:
קורא המסך יקריא את המלל הכתוב במאפיין זה.
דרישה:
יש צורך ב-JavaScript כדי לעדכן את ערך המאפיין.
aria-selected
ערכים: true/false
מתי להשתמש:
כאשר התגיות מתנהגות כמו radio button אבל הם לא באמת כאלו.
כמו לשוניות (tabs) שכל בחירה מציגה תוכן אחר.
תוצאה:
קורא המסך יעדכן בכל שינוי את המשתמש במלל "נבחר" או "לא נבחר"
דרישה: יש צורך ב-javascript כדי לעדכן את ערך המאפיין בכל לחיצה.
aria-live
ערכים: polite/assertive
מתי להשתמש:
כאשר רוצים לעדכן את המשתמש, גם אם אינו מפוקס על התגית המדוברת.
למשל בצ'אט:
כאשר הגולש מקבל תשובה מהצד השני, אנחנו רוצים שהוא יקבל עדכון על כך,
גם אם הוא המשיך הלאה באתר.
תוצאה:
- Polite – מעדכן את קורא המסך כאשר הוא פנוי, אם קורא המסך מקריא תגית אחרת אז העדכון ימתין עד לסיום.
- Assertive – מעדכן את קורא המסך ללא קשר למצב שלו, אם קורא המסך מקריא תגית אחרת, העדכון יתפרץ פנימה ויעצור את ההקראה של התגית.
למידע נוסף:
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques
לתוסף נגישות חינמי:
https://webration.net/accessibility
מאפיינים נוספים חשובים
Img Alt
ערכים: string
מתי להשתמש:
לכל תמונה חייב להיות ALT המתאר אותה או מספק חלופה טקסטואלית.
תוצאה:
תכונה זאת משרתת אותנו במספר מישורים:
- כאשר התמונה לא קיימת, המלל החלופי יופיע וכך תפקוד האתר לא יפגע.
- קורא המסך משתמש ב-ALT כדי לספר לגולש על מה הוא עומד.
Label For
ערכים: id בלבד
מתי להשתמש:
כל שדה אקטיבי (input) עבור הגולש המצריך תיאור.
תוצאה:
התכונה הזאת משרת אותנו במספר מישורים:
- כאשר השדה יקבל פוקוס, קורא המסך יקריא את ה-label.
- כאשר משתמש בעכבר ילחץ על ה-label הפוקוס יעבור אוטומטית לשדה.
התקף אפילפסיה
יכול להגרם עקב היבהובים במסך או תמונות שמתחלפות במהירות, לכן יש לספק אמצעי עצירה לכל אנימציה אשר מופעלת אוטומטית ללא שליטת הגולש.
גלישה באתר ללא עכבר אלא בעזרת מקלדת בלבד.
מספר דגשים עבור גלישת מקלדת:
- פוקוס על תגיות
- Events צריכים להיות מותאמים גם למקלדת
- (enter, tab, shift tab, space, arrows) יש לספק כפתורי עצירה לרכיבים דינמים אוטומטים וכפתורי תפעול בעזרת מקלדת.
מספר כללים להתאמה לגלישת מקלדת:
- כל תגית שהגולש יכול להשתמש בה, צריכה להיות בעלת יכולת קבלת פוקוס.
- ה-event והפוקוס צריכים להיות על אותה תגית (לא על תגית העוטפת אותה או הנמצאת בתוכה).
- ה-event צריך להיות מותאם למקלדת, כך ש- click יעבוד באותה צורה בעכבר או מקלדת
(פעולת (event) mouseDown/up לא תעבוד במקלדת, אלא רק בעכבר). - כאשר ישנה לוגיקה המשפיעה על לחיצת ה-tab, יש לבדוק כי הלוגיקה עובדת בצורה תקינה בלחיצת tab וגם shift tab, כדי לא ליצור מלכודת מקלדת .
(מצב בו הגולש פיקס את התגית, אך לא יכול לצאת ממנה). - אם דרוש ברכיב מסויים תפעול ספציפי, כמו פתיחת תת-תפריט על ידי החצים, יש לוודא כי המשתמש יידע על כך.
- Outline – אין לבטל אותו, אלא אם דואגים לחלופה לכל הפקדים והתגיות, זהו CSS שכל הדפדפנים במחשב ובסלולר נשענים עליו, על מנת להראות למשתמש הגולש עם מקלדת, את הרכיב עליו הוא מפוקס.
תגיות H צריכות להיות במבנה הגיוני:
- H1 – זוהי תגית הצריכה להופיע פעם אחת בלבד בדף.
- H2-6 – יכולות להופיע מספר פעמים בדף כאשר יש קשר הגיוני, h3 לא יכול להיות כותרת ראשית ל-h2
לסיכום
בזמן פיתוח ובדיקות יש כללים פשוטים שצריך לזכור ולשאול :
- האם לכל התמונות יש טקסט חלופי משמעותי?
- האם ניתן לתפעל דרך מקלדת כל אלמנט על הדף שיכול לקבל פוקוס?
- בזמן ניווט מקלדת, האם הפוקוס מדלג בין תגיות באופן רציף והגיוני?
- האם כל הכפתורים, הכותרות והשדות מכילים טקסט משמעותי?
- האם כל התגיות (שהם לא טבעיות/ לא סמנטיות) בעלות מאפיינים ועזרים לקורא המסך וגלישת מקלדת כמו: aria/role/value/text
- האם כל הודעות השגיאה מסומנות לקורא המסך?
אני שמח לומר שאם הגעתם עד לשלב זה אז כל הכבוד ואתם יודעים קצת יותר על נגישות אתרים.
