מקרה בוחן: הנגשת אתר כרמלון שיווק דיגיטלי לרמת נגישות AAA

אתר כרמלון לשיווק דיגיטלי, בו אתם נמצאים כעת, סיים הליך הנגשה לרמת הנגישות הגבוהה ביותר (AAA) בספטמבר 2104, וכך הפך לאתר הראשון בישראל המותאם לרמה זו. תהליך הנגשת האתר היה ארוך, מורכב ולא זול, אולם כחברה המתמחית בשיווק דיגיטלי, ומספקת ללקוחותיה הרבים מגוון שירותי קידום אתרים (SEO), ניתוח התנהגות גולשים, שיפור יחסי המרה, מסחר אלקטרוני, פרסום בגוגל, ושירותי ייעוץ נגישות אתרים  – ראינו לנכון ללמוד את הנושא על "בשרנו" ולהתמחות בכל הקשור בהנגשת אתרי אינטרנט.
כעת, משהושלמה המשימה בהצלחה מרובה, אנו שמחים להגיש לכם מדריך להנגשת אתר אינטרנט, הליך בו יחוייב כל אתר אינטרנט הפועל בישראל החל מאוקטובר 2016 .

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

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

בנוסף, עלתה סוגיה של תוכן שאינו בשליטת האתר: ישנם מצבים בהם לא ניתן להשלים את התאמות הנגישות לכל רכיבי העמוד. מצב זה נפוץ במיוחד במקרים בהם חלק מתוכן העמוד מגיע ממקור חיצוני (לדוגמא, פרסומות דינאמיות מגוגל). במידה ולא ניתן להשלים התאמת העמוד באתר עקב תוכן שאין לבעלי האתר שליטה עליו, אזי יש לפרסם הצהרת תאימות חלקית . הצהרה זו מאפשרת לאתר לשמור על דירוג התאימות שלו ולהימנע מפסילה בשל מספר עמודים בודדים המכילים תוכן שלא ניתן להנגיש. באתר כרמלון, נתקלנו במצב שכזה בעמודים של תוכן שאינו בשליטתנו בעיקר בעמודים שהכילו מצגות משירות "סליידשייר". בעצה אחת עם אנשי עמותת "נגישות ישראל", הוחלט לפתור את הבעיה בעזרת הצהרות תאימות חלקית (ראו דוגמא בעמוד:
http://www.carmelon.co.il/articles/digital-trends-financial-services ).

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

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

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

כך מנגישים אתר לרמת AAA. צילום מסך מתוך אתר כרמלון

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

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

 

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

הנגשת אתר – רמה AA

1. עיצוב

  • ניגודיות: יש לוודא שהניגודיות (קונטרסט) בין הטקסט לאתר אינה נופלת מ-4.5:1 עבור טקסט בגודל רגיל
  • אין להשתמש בצבע כאמצעי יחידי להעברת מידע
  • הגדלת טקסט: יש לאפשר הגדלה של הטקסט פי 2 (200%) מבלי פגיעה בתפקוד העמוד ובמידע
  • אין לאפשר הבהוב על המסך בקצב של יותר מ-3 פעמים בשנייה
  • העברת מידע: אין להעביר מידע באופן שמסתמך על ערוץ חושי יחיד בלבד, לדוגמא: הנחיות למילוי טופס לא יתבססו על צבע, צורה, או שמע בלבד

2. תוכן

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

3. תכנות

  • טפסים – יש להשתמש ב-label elements כדי לשייך תוויות טקסט עם פקדי טופס, ולתאר קבוצות של פקדי טופס באמצעות קבוצת שדות  ו-legend elements.
  • כאשר יש סדר לוגי מחייב להצגת התוכן בעמוד, יש לסמנו בקוד
  • יש לאפשר ביצוע של כל הפעולות באתר ללא צורך בעכבר. יש לשים לב ולהימנע מ"מלכודות מקלדת", מצבים שבהם מעבר בין אפשרויות עם המקלדת מביא את הגולש למצב שבו אין אפשרות להמשיך לבצע פעולות
  • לכל אלמנט יש tag התחלה וסיום
  • אין attributes כפולים
  • כל ה IDs בעמוד ייחודים
  • הקפדה על nesting נכון
  • שפת התוכן בעמוד מוגדרת ב-html tag. בכל מקום בעמוד שבו יש שינוי בשפה, יש לסמן ב-lang attribute. שימו לב שהסימון הנכון לעברית הוא he ולא he-il (שהוא סימון culture). כמו כן, לאחר סימון השפה צריך לבוא סימון כיוון הטקסט (dir).
  • לכל רכיבי ממשק המשתמש (כולל אלמנטים בטופס, קישורים וכיו"ב), השם והתפקיד של הרכיב מזוהים בקוד
  • לכל frame ו-iframe יש title המתאר את מטרתו

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

  • ניגודיות: לשמור על יחס של 7:1 עבור טקסט רגיל
  • שפה פשוטה: על תוכן האתר להיות ברור לאדם מן הישוב עם 8 שנות השכלה. יש להימנע ממונחים מקצועיים, ביטויים קשים, קיצורים, ראשי תיבות וביטויים עם הגייה מורכבת, או- לספק מנגנון פירושים
  • מנגנון עזרה: יש לספק מנגנון עזרה שמסביר שימוש בכל חלק באתר שאינו אינטואיטיבי לגולש לא מנוסה (לדוגמא, סרגל שיתוף תכנים? ספקו הסבר!)
  • חלופות תוכן: ברמת נגישות AAA, יש לספק את כל החלופות, לדוגמא – שפת סימנים, תמליל בטקסט ואודיו כחלופות לוידאו
  • צבעים: לאפשר למשתמש לבחור את פלטת הצבעים של האתר (צבע טקסט וצבע רקע) כרצונו
  • טקסט אינו מיושר לשום צד (not justified)
  • רווח 1.5 בין שורות, ורוחב טקסט אינו עולה על 80 glyphs.
  • הבדל בין צליל לרקע: במקרה של שימוש בקטעי אודיו באתר, יש לייצר הבדל של לפחות 20 דציבלים בין הדיבור לצלילי הרקע בהקלטה ועוד.


עשינו את זה – אתר כרמלון הוא הראשון בישראל בעל רמת נגישות AAA!

אחרי שיישמנו את כל (כל!) הסעיפים הנדרשים, כפי שהובאו לעיל, אחרי תהליך שלקח מעל לשנה ומאות שעות עבודה (ולהזכירם, איננו אתר גדול במיוחד, סה"כ כ-60 עמודים), ולאחר תיקונים ובדיקות חוזרות ונשנות (ונשנות וחוזרות…) – הגיע הרגע המיוחל שלנו – הגשנו את האתר לבדיקה של עמותת "נגישות ישראל". בתוך מספר ימים קיבלנו את תו הנגישות המיוחל (ראו צילום מסך), ויכולנו להוסיף לעצמנו עוד תואר ראוי, חשוב ומחייב – אתר כרמלון הוא האתר הראשון בישראל בעל רמת נגישות AAA.

צילום מסך מתוך אתר נגישות ישראל, המעיד על כך שאתר כרמלון זכה לרמת נגישות AAA

צריכים גם אתם להנגיש אתר אינטרנט? זקוקים לייעוץ ולהכוונה? רוצים ליהנות מניסיוננו הרחב בתחום הנגשת אתר? כנסו לדף "ייעוץ וליווי הנגשת אתרי אינטרנט" ונסייע לכם ליצור אתר נגיש לכלל הגולשים

אין תגובות למאמר

עדיין לא נכתבו תגובות.

כתוב תגובה

שדות חובה מסומנים בכוכבית (*)