מה בנינו כדי לעמוד בת"י 5568 — ואיפה בחרנו לא לעמוד

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

האתר נבנה לפי ת"י 5568 ברמה AA, האימוץ הישראלי של WCAG 2.0, והתקן שתקנות הנגישות לשירות מפנות אליו. יש בו חריגה אחת, מודעת ומתועדת, שמפורטת בהמשך המדריך. זה תיאור של איך נבנה האתר, לא אישור ולא בדיקה חיצונית.

הצהרת הנגישות היא לא הנגישות

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

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

מה באמת עשה את ההבדל

שלושה דברים תרמו יותר מכל השאר, ואף אחד מהם לא נראה על המסך:

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

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

למה לא ווידג'ט

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

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

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

צבע הוא החלק שהכי קל לטעות בו

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

איפה האתר הזה לא עומד בתקן

לבן על הכתום של הקריאה לפעולה נותן יחס ניגודיות של 2.13:1. הדרישה ברמה AA היא 4.5:1. זה כישלון, והוא מכוון.

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

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

מה שבודקים לפני שמשחררים מסך

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

עברית מימין לשמאל היא שכבה נוספת של אותה עבודה — כתבנו עליה במדריך RTL זה לא direction: rtl.

איך אנחנו בונים אתרים שנגישות היא חלק מהם