איך לשפר את נגישות האתר - 10 טיפים חשובים
הכנו עבורכם מדריך מקצועי, הכולל 10 ליקויי נגישות נפוצים שפגשנו במהלך השנים במהלך טיפול בתביעות והתראות נגישות.
במדריך זה נפרט אודות אותם ליקויים וכמובן נסביר כיצד להימנע מהם בפשטות.
שימו לב, הטמעת תוכנת vee באתר תספק כיסוי נגישות של כ80%-95% בצורה אוטומטית ללא צורך בתיקון או התאמה של קוד האתר.
כיסוי מסוג זה מספיק על מנת לעמוד בתקן 5568 רמת AA ולהימנע מתביעות נגישות (60 יום לתיקון ליקויים).
ע”י יישום ההמלצות במדריך, ניתן לשפר את ביצועי התוכנה ולהגדיל את אחוזי הכיסוי באתר.
עשו את מירב המאמצים להקפיד על סעיפי המדריך על מנת שתהנו מאתרים נגישים יותר, מקודמים יותר ובטוחים יותר.
מדריך זה נכתב לאחר ניסיון של שנים בהנגשת אתרים, טיפול בעשרות תביעות נגישות והיכרות מעמיקה עם עולם הנגשת האתרים.
1.באנרים עם טקסט קפוא:
תיאור:
שימוש בבאנרים המכילים אינפורמציה עבור לקוחות (מבצעים/מידע כללי)
פופולרי מאוד בקרב אתרים.
טעות נפוצה היא להטמיע מראש את הטקסט בבאנר “כתמונה” ולא כטקסט “חי”
בנפרד.
פעולה זו מונעת מתוכנת הנגישות להעביר את אותו מידע ללקוחות בעלי מוגבלויות
(עיוורים/כבדי ראיה).
פתרון:
2 אופציות:
1.להעלות את הבאנר ללא טקסט (רק העיצוב) ולהוסיף את הטקסט “עליו”.
2.להעלות את הבאנר עם הטקסט מראש “כתמונה” ולתאר את הבאנר/תמונה
העתקת הטקסט במלואו(ב”ALT”).
תמונה להמחשה:
2. כותרות:
תיאור:
H1 .1 שימוש לא נכון בכותרת
2. ניסיון להדגשה/הבלטה של כותרת ע”י הגדרתה ככותרת H1/H2
3. היררכיית כותרות לא נכונה
פתרון:
1. כותרת ראשית (H1) אחת חייבת להיות בכל עמוד (בד”כ המסר המרכזי). אין להגדיר יותר מכותרת (H1) אחת בלבד בכל עמוד!
2. יש להגדיר את הכותרת לפי מיקומה ההיררכי ולבצע שינויים ויזואליים ע”י CSS
או הגדרות עיצוב.
3. השימוש הנפוץ ביותר הוא בכותרות H3-H1, יש לשים דגש על היררכיית כותרות נכונה (לפי כללי SEO).
תמונה להמחשה:
3.תמונות:
תיאור:
תמונות המכילות אינפורמציה/מוצר – ללא תיאור או לחילופין תיאור לא תקין
פתרון:
יש לתאר את תוכן התמונה ע”י הוספת תיאור טקסט בתגית ה ALT.
תמונות אווירה לא נדרשות לתיאור – יש להשאיר את ה ALT ריק (לדוגמא: גלריית תמונות אווירה של העסק).
תמונה להמחשה:
4. פוקוס
תיאור:
אנשים בעלי מוגבלות קוגניטיבית/ראיה משתמשים בפונקציית “ניווט מקלדת” בתוכנת הנגישות, בעת הגלישה באתר.
הגדרות או אי הגדרות פוקוס נכונות גורמות לדילוג על תוכן ואף מניעתו מאותן אוכלוסיות.
פתרון:
למה לשים לב:
1. פוקוס מוגדר מימין לשמאל (אתר בעברית).
2. פוקוס על פופ-אפים קופצים ואפשרות סגירה ללא עכבר.
3. “אקורדיון” (נפוץ בשימוש בשאלות/תשובות) – פוקוס יורד לתשובה בעת פתיחה.
4. תפריט נפתח – פוקוס יורד לתת תפריט בעת לחיצה.
תמונה להמחשה (פוקוס הפוך):
5. כפתורים/קישורים:
תיאור:
אי תיאור כפתורים/קישורים היא טעות נפוצה. כל כפתור/קישור באתר צריך לקבל תיאור מדויק.
פתרון:
דוגמא: קישור באתר לסרטון מידע ביוטיוב.
תיאור הקישור: ” קישור לסרטון מידע אודות המוצר X ביוטיוב”
תמונה להמחשה:
6.טפסי צור קשר/משלוח:
תיאור:
שדות למילוי (ע”י הלקוח), לא מוגדרים
פתרון:
לעבור על כל השדות למילוי בטופס ולוודא תיאור של השדה “בלייבל”.
אי ביצוע פעולה זו, מונעת ממשתמשי תוכנת הנגישות לדעת מהו כל שדה ומה עליהם למלא בו.
תמונה להמחשה:
7.אישור תנאי שימוש בעת רכישה/רישום:
תיאור:
ישנם מקרים בהם “קוביית” אישור תנאי השימוש, ממוקמת אחרי כפתור הרכישה/רישום לשירות.
מצב זה מונע מלקוחות בעלי מוגבלויות אשר משתמשים בתוכנת הנגשה, לסמן את “הקובייה” ולאשר את התנאים.
הם “נתקעים” בכפתור רכישה/רישום ללא יכולת לרכוש או לאשר את התנאים.
פתרון:
2 אופציות:
1.למקם את “קוביית” אישור התנאים לפני כפתור הרכישה. כך שבסדר ההיררכי היא תגיע לפניו.
2.להגדיר את הפוקוס על “הקובייה” של אישור התנאים, לפני הפוקוס על כפתור הרכישה.
תמונה להמחשה:
8. הודעות מערכת (אוטו'):
תיאור:
הודעות מערכת אוטו’, נמצאות בשימוש בעיקר לאחר פעולות מסויימות של הלקוח (לדוגמא: השארת פרטים). הודעות אילו קופצות באופן אוטו’ על מנת “להעביר מסר” לאחר פעולה (הודעה התקבלה בהצלחה/רישום נכשל וכו’).
בלא מעט מקרים הודעות אילו מופיעות בשפה אנגלית (מגיע באנגלית בדיפולט).
פתרון:
להתאים את שפת הודעות המערכת לשפת האתר.
במידה והאתר בעברית, נדרש לתרגם הודעות אלו לעיברית.
תמונה להמחשה:
9.כפתורי סושיאל :
תיאור:
כפתורי סושיאל (פייסבוק/אינסגרם וכ’ו) מחוייבים בתיאור.
ברוב המקרים הם מתוארים אוטו’ באנגלית ובחלק מהמקרים אין תיאור כלל.
פתרון:
יש לעבור כפתור כפתור ולוודא שקיים תיאור (גם באנגלית זה תקין)
תמונה להמחשה:
10. לוגו אתר
תיאור:
לוגו האתר צריך לקבל תיאור גם כן. אין להשאיר את הALT ריק.
פתרון:
תיאור: “לוגו אתר”.
אנחנו פה לכל שאלה וייעוץ
אנחנו פה לכל שאלה וייעוץ
