נגישות אתרים
(הכתבה הזאת נכתבת כעזר ללקוחות ואינה מהווה ייעוץ משפטי מחייב כלשהוא בנושא נגישות אתרים אלא כמידע כללי בלבד).
כבעל עסק יתכן כי האתר שלך מחויב בנגישות אתר האינטרנט,
כדי לדעת בוודאות מה הדרישות ענו כאן על השאלון הקצר של איגוד האינטרנט הישראלי ובדקו האם אתם צריכים להנגיש את האתר שלכם:
שאלון – האם אני צריך להנגיש את האתר שלי
כמו שנכה בכיסא גלגלים זקוק לרמפה או מעלית כך גם בחיי היומיום במרחב הדיגיטלי ישנם אוכלוסיות מוגבלות הזקוקות להנגשה.
חשוב לציין כי איפיון נכון של מוצר דיגיטלי כבר בהתחלתו דורש התחשבות בנושא הנגישות שברובו בנוי הגיונית עבור כלל האוכלוסיה ולאו דווקא לאנשים עם מוגבלות.
איגוד האינטרנט העולמי (W3C) יצר קווים מנחים עבור המטרה: הנגשת תוכן דיגיטלי לכלל האוכלוסיה.
מהם 5 סוגי המוגבלויות:
מוגבלות פיזית | מוגבלות קוגנטיבית | מוטוריקה | ראייה | שמיעה |
פיגור, קשב, דיסלקציה | קצרי רואי, עיוורון צבעים, עיוורון מוחלט |
מדוע חשוב להנגיש את האתר
לאפשר ולהקל על כלל הלקוחות להשתמש באתר בצורה קלה
מה אתם תרויחו מזה?
- מוסריות ומחויבות ללקוחות-ימתג אתכם כסולדריים ובעלי רצון ליצור חוויה חיובית לכלל הלקוחות.
- חיזוק העסק שלך- כמוסרי ומתחשב בעיני הלקוח וגוגל ישפר את מיקומכם בדירוג ה-seo.
- חשיפה לקהל לקוחות- אתר נגיש יחשוף אתכם ליותר לקוחות.
- מניעה תביעה משפטית- חלק מהעסקים נדרשים ע"פ החוק בישראל בנגישות האתר ניתן לבדוק זאת בשאלון כאן :
ישנם 3 דרגות התאמה לאתר נגיש והם:
A-רמת נגישות מינימלית שכל האתרים והאפליקציות צריכים לעמוד בה.
AA-מיועד לאתרים עם שירותים מקוונים.
AAA-רמה של חווית נגישות מלאה.לבוני אתרים שבנינו הנה כמה קישורים חשובים להרחבת מוצרים נגישים: - WCAG-תקן בינלאומי הנחיות וישומים לנגישות באינטרנט
לפי התקן ישנם 4 עקרונות ראשיים שצריכים לעמוד בהם:
(רוב הדרישות מקבילות גם לחווית משתמש טובה ולקידום אורגני בגוגל).
-
קל להבחנה/נתפס (perceive)
המידע וכל מרכיבי ממשק המשתמש חייבים להיות מוצגים כך שאפשר יהיה לתפוס אותם.ניתן להפעלה
האלמנטים והניווט בממשק המשתמש חייבים להיות ניתנים להפעלהניתן להבנה
מידע ופעולות ממשק המשתמש חייבים להיות ניתנים להבנה.אמינות ויציבות
תכנים חייבים להיות יציבים כך שניתן לתרגם אותם באמינות ע"י מגוון רחב של סוכני משתמש כולל טכנולוגיות מסייעות- האלמנטים המוצגים באתר מובנים וניתנים לתפישה קלה. שהגולש מבין איפה התפריט מהו כפתור וכו…
- שימוש בסימנים ידועים כמו אייקונים של לייק, טלפון, וואטסאפ, תפריט ועוד.
- ניתן להבחנה על ידי כל החושים שמיעה וראייה.
דוגמאות הלכה למעשה: תמלול לוידאו, סאונד שאינו פועל ברקע, הנגשת תמונות על ידי אפשרות הקראה של טקסט המסביר מה בתמונה ועוד.
יש לוודא שכל הרכיבים באתר ניתנים להפעלה.
הגולש צריך להיות מסוגל להפעיל את הפעולות באתר בצורה ברורה וקלה.
דוגמאות הלכה למעשה: אייקונים שצריכים להיות לחיצים יהיו בגודל מתאים, כפתור ברור, היכן נמצא תפריט,שהגולש יבין מה הוא עושה או צריך לעשות בתוך העמוד באתר.
העברת המידע בטקסט משולב באייקונים או תמונות זאת אומרת חיווי כפול.
דוגמאות הלכה למעשה: טקסט פשוט וקריא, גודל ומרווחי פונטים, מספר תווים טפסים ברורים.האתר צריך לעמוד בדרישות העדכניות ביותר.
כדי לוודא שהאתר שלכם הוא מוצר בטוח ניתן לבדוק זאת בעזרת הכלים הבאים:
בדיקת קוד של W3C
בדיקת קוד של WAVE
בדיקת נגישות AC
נושאים שניתן לשפר בעבור מוגבלי ראיה
- צבע- נגישות צבע מאפשרת ללקוחות בעלי קושי בראיה לחוות אינטרקציות באתר כמו שאר הגולשים באתר.
- ניגודיות הצבעים בין רקע לטקסט לפי יחסים שנבדקו .
ישנם כלים שניתן לבדוק דרכם:
accessible web
color contrast checker
color adobe
ניתן לבדוק גם בעזרת פלאגין שמותקן ב-FIGMA - שילוב של אייקונים טקסטורות טקסטים ולא רק צבעים יקלו על משתמשים שהם עיוורי צבעים.
- להמיר טקסטים לאודיו-אפשרות לשמוע כתבות ולא לקרוא אותם.
- להנגיש תמונות לקוראי מסכים (בין היתר בעזרת טקסט אלטרנטיבי לתמונה שיוקרא למשתמש)
נגישות קוגנטיביות
ישנם הנחיות נגישות בעבור אנשים עם יכולות קוגנטיביות נמוכות כמו הפרעות קשב וריכוז, דיסלקציה ותפקוד מוחי ירוד.
את ההנחיות של ארגון WEBAIM ניתן לקרוא כאן:תמצית ההנחיות:
- כותרות גדולות יותר מהטקסט הרץ בלפחות 20% ומודגשות יותר.
- שימוש בגופנים שאין בהם אותיות לא ברורות או מסורבלות (או בשפת העיצוב גופן סאנס סריף).
- גודל גופן לטקסט רץ 16PX (מומלץ 18-20PX).
- בתיבות טקסט יש ליצור שוליים פנימיים (ריווח) (Padding).
- בשורת טקסט לא יותר מ 60-70 תווים לשורה.
- יישור טקסט לפי השפה בעברית מימין באנגלית שמאל וכו..
- מרווחים בין שורות ביחס 150% ובין פסקאות 200%.
- להימנע מטקסטים מעל תמונה או טקסטורות לא ברורות.
- יש להדגיש קישורים עם קו תחתון וצבע אחיד המקובל הוא בגוון כחול.
- ריווח שוליים חיצוניים (Margins).
נגישות פיזית
אנשים שאינם מסוגלים פיזית להפעיל מחשב עכבר ומקלדת הם מוגבלים בתנועה בקורדינציה הן במחלות גופניות והן במצבים מולדים
כאן באים לעזרה פתרונות כמו: תוכנות שמזהות קול, מקלדת עם טכנולוגיה להשלמת מילים, כלי העובד באמצעות נשיפה, ועוד טכנולוגיות מסייעות.
מוגבלות מוטורית
- ישנם אנשים שאינם מסוגלים להשתמש בעכבר ורק תמיכה בעזרת מקלדת עובדת עבורם בהנגשת האתר יש לוודא שהוא מותאם לניווט בעזרת מקלדת.
- בניווט בעזרת מקלדת חשוב שסדר הניווט יהיה נכון. מראש האתר ומימין לשמאל באתר בעברית וכן הלאה.
- לכל אלמנט חשוב שיהיה מצב פוקוס ברור (לדוגמה שדה בטופס), מצב פוקוס לכפתורים וקישורים.
- עיצוב במצב ריחוף על אלמנט כפתורים וקישורים חשובים (hover)
- לוודא שהפעולות באתר דורשות כמה שפחות לחיצות (להימנע מלחיצות מיותרות) ולאפשר באתר דילוג בין תפריטים ותוכן בקלות.
- תיבת חיפוש ברורה ועם אפשרות לחיפוש קולי.
עיצוב למובייל
- מרווחים סביב אובייקטים לחיצים (44px) לשים לב במיוחד במובייל,
(הכוונה שגודל אצבע ממוצעת תלחץ בקלות על האלמנט) - יש לוודא אפשרות סיבוב מוצר לפי מכשיר.
- ביטול גלילה אופקית.לכל ההמלצות להנגשת תכני אתרי אינטרנט קראו כאן:
נגישות אתרים הוא לא רק עניין טכני, אלא גם עניין של אחריות חברתית ואסטרטגיה עסקית חכמה.
בהנגשת האתר שלך, אתה לא רק מרחיב את קהל היעד הפוטנציאלי שלך, אלא גם מראה שאתה מחויב לשוויון.
אם אתה מחפש מומחים שיוכלו לעזור לך להנגיש את האתר שלך, "הסטודיו של מל" כאן בשבילך.
אנחנו מתמחים בבניית אתרים נגישים שלא רק נראים מעולה, אלא גם מאפשרים לכל המשתמשים ליהנות מהם.
צרו איתנו קשר היום ובוא נהפוך את האתר שלך לנגיש יותר – זה טוב לעסק שלך, טוב ללקוחות שלך, וטוב לחברה כולה.