בדרך לתבנית וורדפרס נגישה

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

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

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

עדיין מסוקרנים – יאללה בואו נתחיל 🙂

 

כדי להבין מה היא הנגשה – בדגש על תבנית וורדפרס – הנה רשימת קריאה להעמקה:

• מתוך Theme Review Handbook – מה ההגדרות לתבנית נגישה
• מתוך אותו מקור – מה חייבים (required) בשביל נגישות
• 2 כתבות מעניינות על שיפור הנגישות ודוגמאות לתבניות וורדפרס נגישות:
  • make wordpress accessible
  • רשימת תוספים ותבניות שיהפכו את האתר לנגיש
• אחרון חביב- כלים שוורדפרס ממליצה עליהם לשיפור הנגישות

 

איך ניגשתי לפרוייקט?

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

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

 

 

עכשיו המטרה שלי הייתה למצוא כמה שיותר פתרונות זמינים שלא יצריכו ממני הרבה עבודה. אחרי שקראתי קצת, הגעתי ל 3 תוספים שהחלטתי להתקין. הראשון הוא Accessible Poetry, תוסף שמאפשר הנגשה של האתר באספקט הויזואלי שלו: הגדלת/הקטנת גודל פונט, שליטה על בהירות/כהות של האתר, סימון קישורים, עצירת אנימציות והפנייה לעמוד של הצהרת נגישות ומשוב של משתמשים. בצד הניהול של האתר התוסף מגיש רשימה של כל התמוונת שאין להם alt-text. אני מחבבת את התוסף לא רק משום שהוא עושה את העבודה, אלא במיוחד לאור העובדה שהוא נכתב ע"י עמית מורנו שהוא ישראלי, שבחר להגיש ממשק ניהול בעברית שזה מאוד לא מובן מאליו. וחוץ מזה – אין כמו  קצת פטריוטיות 🙂

 

 

התוסף שני הוא WP Accessibility. בעיקרון גם בתוסף הזה יש אפשרות להצגת חלק מהמאפיינים שהתוסף Accessible Poetry מציג – אבל באופן הרבה פחות מזמין – אבל מעבר לזה, התוסף מאפשר תוספות נגישות לעניינים מובנים בוורדפרס. למשל:

• הוספת שם הפוסט לכיתוב read more, מה שמקל על מי שמשתמש בקורא מסך להבין לאיזה פוסט הוא מופנה, ולא לשמוע רק כותרת של "המשך קריאה" שלא מספיק מבהירה המשך קריאה של מה.
• הכנסת label שמציין חיפוש לתיבת החיפוש של וורדפרס ולכפתורי התגובות
• ועוד….
• דבר נוסף שהתוסף מאפשר הוא תפריט דילוגים. ברוב התבניות החדשות התפריט הזה מובנה בדיפולט, אבל בתבנית יחסית ישנה שהנגשנו – לא היה. סימון V על האפשרות של הפעלת skip-links פתר את העניין.

 

תוסף שלישי ואחרון שהתקנתי היה WCAG 2.0 form fields for Gravity Forms, תוסף שמנגיש את התוסף gravity-forms. למי שמתעניין דווקא ב-contact-form-7, לפי אחד הפוסטים ברשימה שלמעלה יש גם תוסף שמנגיש אותו.

 

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

• באחד  האתרים, למשל, היה סרגל ניווט עליון עם רמה שניה שמופיעה רק במעבר עכבר (hover). אבל ניווט עם מקלדת לא מאפשר hover, ואז בעצם הרבה מהתכנים שיש בניווט אינם נגישים. חיפשתי קצת ומצאתי מאמר מעולה שמסביר צעד אחרי צעד מה לעשות כדי לטפל בעניין. אני לא אתיימר להביא פה מדריך בעברית – מה גם שהמאמר מאוד ברור – רק אציין שהפתרון כלל הוספת קובץ PHP, JS וטיפול ב-CSS, ועמדתי בעניין בכבוד ובהצלחה 🙂
  תובנה לדרך: אלמנטים שמוסתרים בעמוד על ידי display: none ומופיעים אחרי לחיצה (או hover) – אינם נגישים. רק אלמנטים שנמצאים ב visibility: hidden יהיו נגישים.
• תיקוני css שקשורים לעיצוב כמו למשל:
  • לא היה באתרים עיצוב של כותרות h2, h3, h4 וכו' ואם היו – הם לא היו היררכיות בגודל. למשל, אסור שמראה של כותרת h4 יהיה משמעותי יותר מאשר h3.
  • בהחלת ניגודיות כהה או בהירה ע"י התוסף Accessible Poetry צצו בעיות – תמונות שלא נראו, טקסט שלא היה קריא. עברתי על העמוד הראשי ועמוד פוסט מייצג כדי לטפל בעניין.
  • הוספתי alt-text לתמונות שנמצאות בקוד של התבנית (נכון, זה לא CSS אבל הרגשתי בת בית כשעשיתי את זה אז זה כמו CSS בשבילי 🙂 )
• הוספת aria-label לקישורים של 'המשך קריאה' (כאלה שנבנו בצורה כזאת שהתוסף WP Accessibility לא יכל לפתור)
• באתרים שהנגשנו היו 2 שימושים בסליידרים שלא היה ניתן להנגיש אותם:
  • הראשון היה סליידר של תוכן. כדי לטפל בבעיית חוסר הנגישות יצרנו מעליו קישורי דילוג שכללו: הפניות לתוך התוכן שהסליידר מכיל (לא היו הרבה), וקישור לדילוג מעל הסליידר. בתחתית הסליידר הוספנו קישור נוסף לדילוג כדי שגם בניווט מאלמנט מתחת לסליידר לא יכנסו ל"מלכודת" שהוא יוצר.
  • השני היה סליידר של גלריית תמונות. אמנם הצלחנו להנגיש את הניווט בו, אבל אם משתמשים בתוכנה של קורא מסך, משהו בשילוב בין ניווט החיצים בסליידר לניווט של קורא המסך משתבש. גם פה יצרנו כפתורי דילוג לפני ואחרי הסליידר.

 

2 עניינים אחרונים בנושא הנגישות

• אתר מונגש חייב להציג "הצהרת נגישות". יש הרבה דוגמאות בכל מיני אתרים. יש באתר נגישות ישראל כללים של מה צריכה להכיל הצהרת הנגישות.
• כדי לעזור למנהלי האתרים להנגיש את התוכן יצרנו מסמך הנחיות לנגשת התוכן, שכלל הסברים כמו איך להשתמש נכון בכותרות, איך לתת alt-text משמעותי ועוד.

 

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