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

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

 

1. טכנולוגיות נגישות

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

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

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

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

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

2. ניווט באמצעות המקלדת

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

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

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

באתר http://www.worldtimebuddy.com אפשר לנווט בין הקישורים השונים בקלות באמצעות המקלדת ואף להוסיף ערים לרשימת ההמרה, אבל אם תרצו לשנות את הזמן או למחוק ערים תצטרכו להושיט יד לעכבר. כמו כן שינוי סדר הערים ברשימה אפשרי רק עם שימוש בעכבר.

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

textarea, input {
    outline: none;
}

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

3. לינקים

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

<a href="contact.html">Contact Us</a>

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

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

span.mylink {
  text-decoration:underline;
  color:blue;
  cursor:pointer;
}

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

קחו לדוגמא את עמוד חיפוש סניף של בנק דיסקונט ותראו אם אתם מצליחים להכנס לפרטי סניף באמצעות המקלדת בלבד:
https://www.discountbank.co.il/DB/branches?city=&name=

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

<a href="page.php?id=7">Read More</a>

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

4. מדיה

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

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

<img src="lolcat.png" alt="Funny cat holding an umbrella" />

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

5. טקסט

הנחיה 1.4.4 קובעת שגולשים יוכלו באמצעות שינוי הגדרות דפדפן בלבד להגדיל את הטקסט עד פי 2 מגודלו ה״טבעי״ בלי לפגוע בתוכן או פונקציונליות. לדפדפנים קיימים שני מצבי פעולה להגדלת טקסט, האחד נקרא Zoom והשני הגדלת טקסט בלבד. רוב הגולשים שבאמת צריכים את ההגדלה יעדיפו להשתמש בהגדלת טקסט בלבד מאחר והדבר משאיר את ה Layout של העמוד כמו שהוא.

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

View -> Zoom -> Zoom Text Only

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

<html lang="he">
...
</html>

או בגוף המסמך אם יש לכם אלמנט שכולל תוכן בשפה שונה.

6. קישורים ומידע נוסף

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

להלן מספר קישורים להמשך למידה על נושא ההנגשה והתקינה הרלוונטית.

המסמך Understanding WCAG2 שמסביר בפירוט מהו התקן ומה משמעות כל סעיף בו:
http://www.w3.org/TR/UNDERSTANDING-WCAG20/complete.html

צ׳ק ליסט אתר נגיש של WebAIM (ובכלל כל האתר שם מלא במאמרים מועילים):
http://webaim.org/standards/wcag/checklist