מידע כללי : נגישות לבעלי מוגבלויות

מידע כללי : נגישות לבעלי מוגבלויות

מה אומר החוק – הנגשת אתר האינטרנט הינה חובה במדינת ישראל.

החוק ייכנס לתוקף לקראת סוף שנת 2017.  אבל כבר היום חלה חובת הנגשה של כל אתר חדש ברמת AAלפחות.

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

בישראל כ-25% מן האוכלוסייה הינם אנשים בעלי מוגבלויות שונות, כגון עיוורון ומוגבלות ראייה, איבוד שמיעה או חירשות, לקויות למידה שונות, מוגבלות תפיסה, תנועה, דיבור או רגישות לאור וכן דוברי שפות שונות כמו עולים חדשים. כל אחת מן המוגבלויות הללו, או שילוב של כמה מהן יחד משפיעה על יכולתם של בעלי המוגבלויות להשתמש באינטרנט כשאר בני האדם. למרות מוגבלותם, אנשים אלה גולשים באינטרנט והם למעשה לקוחות פוטנציאליים. מחקר שערכה חברת מיקרוסופט מגלה שכ-25% ממשתמשי המחשב זקוקים לטכנולוגיה נגישה, ו-37% נוספים נהנים מקיומה של טכנולוגיה כזו. אלו נתונים מרשימים, ולכן, בעת בניית אתר אינטרנט, רצוי לקחת בחשבון את בעלי המוגבלויות, וליצור אתר נגיש.

מהו אתר נגיש?

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


מי צריך נגישות אתרים
?

נגישות האתר יכולה להשפיע על איכות הגלישה באתר לקהלים שונים, באופנים הבאים:

בעלי מוגבלויות, זקנים ואנשים שאינם דוברים את השפה - אנשים אלה משתמשים תכופות בכלים העוזרים להם בגלישה באתרי אינטרנט, כמו כלי תרגום בין שפות שונות, כלי זום (zoom) להגדלת אזורים שונים במסך, תוכנות להפיכת טקסט לדיבור (Text to Speech) או לכתב ברייל. הנגשת אתרים הופכת את השימוש בכלים אלה לטוב יותר, ומקלה עליהם את התרגום לברייל, לדיבור או לשפה שונה.

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

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



 

 

 

 

 

 


 

עקרונות לעיצוב נגיש
 

1.      עקביות - עקביות הוא כלל חשוב מאוד בעיצוב ממשקי משתמש וללא עקביות המשתמש יחוש כי הוא הולך לאיבוד בתהליך הניווט באתר.

2.      ממשק פשוט וטבעי - ממשק משתמש טוב צריך להיות פשוט עד כמה שניתן. ממשק המשתמש צריך להציג למשתמש בכל רגע נתון את המידע שהמשתמש זקוק לו באותו הזמן וכל תוספת של מידע שאיננו רלוונטי עשויה ליצור עומס על המערכת הקוגניטיבית של המשתמש. בעיצוב ממשק המשתמש יש לזכור כי "מעט הוא הרבה".

3.       תקשורת בשפת המשתמש - מאחר והממשק משמש כסביבת עבודה תלוית תרבות, לכן על שפת התקשורת בממשק להיות מותאמת לשפת המשתמשים ולתרבותם.

4.      משוב ועזרה - ממשק משתמש צריך לכלול אזור של משוב ותמיכה למשתמש.

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



כללים לעיצוב אתר נגיש

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

 

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

 

 

דרישות הנגשה לרמת הנגשה A

·        חלופה טקסטואלית לתוכן שאינו טקסט

·        הוספת תגיות alt (טקסט אלטרנטיבי) לתמונות

·        חלופה שמיעתית ל- CAPTCHA במידת הצורך.

·        עזרה בהזנת קלט

·        זיהוי אוטומטי של שגיאות קלט והתראה ממוקדת על השגיאה באמצעות טקסט

·        לספק הוראות מדויקות להזנת הקלט כגון תיאור ב-LABEL

·        חלופה למדיה המוקלטת מראש, וידאו או אודיו

·        קטע אודיו או וידאו יהיה בעל מנגנון עצירה, עוצמת הצליל וקצב ההשמעה

·        קטע אודיו – חלופה טקסטואלית

·        קטע וידאו – כתוביות.

·        גמישות בהצגת התוכן בלי לאבד מידע

·        כותרת בעלת משמעות לכל עמוד

·        אין לעצב את הדף בצורה כמותית

·        סדר התוכן בעל משמעות

·        עיצוב ברור וקריא

·        תחביר תקין של קוד העמוד (HTML)

·        צבעים מנוגדים של הכתב והרקע (ניגודיות )

·        קישורים בעלי משמעות (אין להשתמש ב"לחץ כאן" וכד')

·        כל קישור, כפתור או דבר דומה יכיל כמה אלמנטים עיצוביים

·        לאפשר שליטה על גלילה, הבהוב ותנועה אוטומטיים

·        יש להימנע מעיצוב באופן הגורם להתקפים אפילפטיים

·        לא יותר משלושה הבזקים בשנייה אחת

·        תכני טקסט קריאים ונהירים

·        יש להשתמש בפירורי לחם (BREAD CRUMBS)

·        רישום של שפת הממשק והתוכן בקוד העמוד

·        שליטה על האתר אך ורק באמצעות המקלדת

·        בלי דרישה לקצב הקלדה מסוים

·        אין להשתמש בהגדרת מוקד\פוקוס של המקלדת.

·        
הגדרת Tab indexבעלת משמעות

 

·        משך זמן קריאה מספק של העמוד ללא ריענון אוטומטי

·        אפשרות שליטה על משך הזמן לקריאת העמוד (למעט אירועים בזמן אמת)

·        מנגנון שליטה על עדכונים אוטומטיים



 

דרישות הנגשה לרמה AA  (כוללת בנוסף את כל המאפיינים של רמה A)\

·        חלופה למדיה בשידור חי, וידאו או אודיו

·        כתוביות בשידור חי

·        קטע ווידאו המוקלט מראש בעל כתוביות עם תיאורי אירוע או תיאור בשמע של האירועים

·        עזרה בהזנת קלט

·        הצעות לתיקון השגיאה בהזנת קלט

·        תמיד יתבקש אישור הפרטים המוזנים בטופס לאחר מילואם על ידי הגולש תוך נתינת אפשרויות התיקון המתבקשות

·        מתן הזדמנות לתיקון שגיאות קלט

·        מסמך המאפשר סקירה של הפרטים ואישורם

·        גמישות בהצגת התוכן בלי לאבד מידע

·        אפשרות לשינוי גודל של טקסט עד 200% ללא שימוש באמצעי עזר

·        עיצוב ברור וקריא

·        אין להשתמש בטקסט המוטמע בתמונות

·        שימוש בכותרות (HEADINGS) ותוויות (LABELS) כדי לתאר את התוכן באתר

·        יחס ניגוד של הטקסט והרקע 5:1

·        תכני טקסט קריאים ונהירים

·        רישום בקוד על שינוי השפה בחלקים שונים של הדף

·        אפשרות לאיתור עמוד באתר באמצעות מספר דרכים

·        ממשק האתר יאפשר מציאת מוקד המקלדת באופן חזותי

 

 

 

רשימת הנחיות תכנות

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

·        הוספת כפתור נגישות

·        חלוקת האתר לבלוקים ויצירת כפתורי גישה ישירה אליהם.

·        שימוש בכותרות Hבאופן מדורג והיררכי בכל דפי האתר.

·        הסתרת אלמנטים אשר לא אמורים להיקרא.

·        הגדרת מאפיינים העומדים בתקן ARIA (Accessible Rich Internet Applications).

·        התאמת טפסים לדרישות הנגישות.

·        טיפול בתפריטים.

·        הטמעת טקסטים נסתרים לקורא מסך.

·        יצירת כפתורי עצירה לאנימציות ( כגון : תמונות מתחלפות ועוד.. ).

·        התאמות לחלונית בחירת תאריך

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

·        הדגשת האלמנטים הנמצאים בפוקוס באופן מותאם אישית.

·        טיפול באובייקטים הנוספים דינאמית לדף.

·        פיתוח קוד JavaScript מותאם.

·        פיתוח CSS  מותאם.

·        עצירת הנפשות שמקורן בקוד או בעיצוב + שליטה ידנית (לדוג`: גלריית תמונות).

·        עצירת תמונות אנימציה(gif).

·        הפיכת האתר לגווני אפור.

·        הפיכת האתר לרקע כהה עם טקסט בהיר תוך הגברת הניגודיות.

·        הפיכת האתר לרקע בהיר עם טקסט כהה תוך הגברת הניגודיות.

·        הגדלת גודל הטקסטים באופן יחסי ל-5 גדלים.

·        הפיכת הגופנים באתר לגופנים קריאים נטולי תגיות

·        הגדלת מצביע העכבר וצביעתו לפי בחירת המשתמש.

·        חלונית הגדלה: הגדלת התצוגה בדפדפן (זום).

·        הפיכת הקישורים / הכותרות באתר לבעלי עיצוב ייחודי בולט.

·        הצגת התיאור החלופי לתמונות (מאפיין alt) בחלונית קטנה המוצגת במעבר עכבר על התמונה.

·        פירורי לחם (breadcrumbs)

·        כל תמונה, ללא יוצא מן הכלל מכילה מאפיין Alt המתאר את תוכנה.

·        אלמנטים המכילים תנועה אוטומטית (תמונה מתחלפת, טקסט רץ) יאפשרו לגולש להפסיקה.

·        מומלץ להימנע מחלונות קופצים במהלך ניווט בתוך האתר.

·        שימוש בחלום קופץ צריך להיות מלווה בהתראה מתאימה מראש.

·        יש לאפשר שליטה מלאה על האתר באמצעות המקלדת

·        מוקד המקלדת (פוקוס) יזוהה באופן חזותי על המסך – כל הכפתורים, לינקים ופקדים אחרים.

·        אלמנט חייב להכיל מאפיין href בכדי שיהיה מזוהה לקורא מסך כאלמנט לחיץ.

·        אין להוסיף מידע חשוב על הקישור בתוך מאפיין Title לא כל קוראי המסך מתייחסים. מידע חשוב רצוי להציג לכולם.

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

 

 

רשימת הנחיות עיצוב

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

·        הפרדה בין חלקי הממשק (תפריטים, כפתורים) לאזור התוכן.

·        סדר הופעת התוכן בדף, על פי מידת חשיבותם של הדברים.

·        גופנים מומלצים לכתיבה ממשפחת:  Sans-serif כגון Arial, Tahoma, Helvetica.
למידע
נוסף בנושאhttp://webaim.org/techniques/fonts

·        שמירה על ניגודיות בין צבע הטקסט לרקע (גם בכפתורים ותפריטים) של 1:4.5 לפחות.

·        אין הדבר כולל לוגו או אלמנטים שחשיבותם עיצובית בלבד.

·        עבור טקסטים בעלי קנה מידה גדול תידרש ניגודיות של 1:3.

·        קישורים צריכים להיות מזוהים מהמבנה או מהעיצוב גם למי שאינו רואה צבע:

·        צבע הקישור שונה משמעותית מצבע הטקסט הרגיל הסובב אותו (יחס של 3:1 מהטקסט ו- 5:1 מצבע הרקע) וגם מופיע קו תחתון מתחת לקישור כאשר מצביעים עליו עם העכבר או מקבל פוקוס.

·        באופן קבוע מופיע קו תחתון מתחת לקישור או אלמנט מוסכם אחר שאינו מבוסס צבע.

·        מומלץ להוסיף שינוי צבע (להקפיד על 5:1 מצבע הרקע) בהצבעת עכבר או קבלת פוקוס.

·        מומלץ שלא להשתמש בתוכן בקו תחתון עבור ביטויים שאינם לינקים.

·        אין לעצב תכנים באופן המניח כי המשתמש רואה צבע ומבחין בין צבעים להבנת משמעויות שונות.

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

·        יש להימנע מעיצובים העשויים לגרום להתקפים אפילפטיים:

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

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

·        בטפסים מורכבים יש להציג את שמות השדות בסמוך לשדה הקלט ולא בתוך השדה.

 


הנחיות כלליות למבנה תוכן/עורך תוכן

 

·        יש להקפיד על סדר הופעת התוכן בדף, כאשר יש לכך השפעה על משמעותו ועל פי מידת חשיבותם של הדברים.

·        כאשר התוכן הטקסטואלי הינו בעל מבנה מדורג (פתיח, נושאי משנה, סיכום וכדומה), יש להשתמש בכותרות מסוג H באופן היררכי (H1 – H6).

·        אין לסמן טקסט חשוב אך ורק באמצעות: Bold, Underline, Italic. רצוי להוסיף התייחסות מילולית כגון "שים לב", "יש להודיע" וכדומה.

·        מומלץ שלא להשתמש בתוכן בקו תחתון עבור ביטויים שאינם לינקים.

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

·        כל תמונה, ללא יוצא מן הכלל מכילה מאפיין Alt המתאר את תוכנה. יש לציין כי תמונות עיצוביות, שאין להן ערך מוסף לגולש יכילו Altריק.

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

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

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

·        טבלאות נתונים נגישות: יש להשתמש ב, caption.יש להימנע מטבלאות מורכבות (תאים לא אחידים, מיזוג שורות) או טבלאות בתוך טבלאות.

·        שינוי שפה בתוכן יצוין באמצעות מאפיין Lang ב- HTML עבור פסקה או מאמר, לא ברמת מילה.



הנחיות כלליות לטפסים

·        יש להשתמש בהוראות מדויקות להזנת קלט.

·        יש להציג הודעות שגיאה מדויקות לכל שדה ולכל סוג שגיאה.

·        בטפסים מורכבים יש להציג את שמות השדות בסמוך לשדה ולא בפנים.

·        יש להציג למשתמש פירוט של שגיאות הקלט ולאפשר לו לתקן אותן לפני השליחה.

·        לשליחת הטופס ישנה התחייבות פיננסית או משפטית יש לאפשר אחד מהבאים:

·        להפוך את הפעול או מנגנון לבחינה חוזרת של הנתונים שהוזנו ולתקן אותם לפני השליחה הסופית.

 

הנחיות לגבי תוכן וידאו ושמע

·        יש לספק חלופה טקסטואלית למדיה המוקלטת מראש, וידאו או אודיו.

·        יש לספק תיאור של ההתרחשות, בצורה מובנית.

·        העברת כל המידע (קולי או/וגם חזותי) כדי להבין את ההתרחשות (התסריט) במלואה.

·        עבור מדיה וידאו + שמע (למשל הרצאה) שהוקלטה מראש, יש לספק כתוביות.

·        אין לנגן אודיו של יותר מ- 3 שניות באופן אוטומטי

 

ערוצי נגישות נוספים

·        דיוור אלקטרוני  (Newsletter)

 

·        מומלץ לכלול אפשרות להצגת המכתב בגרסה טקסטואלית "Plain text". במיוחד כאשר כל תוכן הדיוור הינו תמונה אחת או רק תמונות.

·        יש ליצור הפרדה ברורה בין הפסקאות ו/או הכתבות באמצעות כותרות וריווח.

·        כל תמונה (גם כפתורים ולינקים), ללא יוצא מן הכלל מכילה מאפיין Alt המתאר את תוכנה.

·        קישורי טקסט ניתנים לזיהוי ע"י קו תחתון או ניגודיות 1:3 מהטקסט סביבם.

 

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

·        גופן מומלץ לכתיבה ממשפחתSans-serif כגון Arial, Tahoma, Helvetica.

·        אין לסמן טקסט חשוב אך ורק באמצעות: Bold, Underline, Italic. רצוי להוסיף התייחסות מילולית כגון "שים לב", "יש להודיע" וכדומה.

 

מדיה חברתית (באנרים שיווקיים)

·        יש לבצע התאמות על פי דרישות התקן, מתוך האפשרויות הניתנות להתאמה במסגרת הפלטפורמה.

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

·        אין הדבר כולל לוגו או אלמנטים שחשיבותם עיצובית בלבד.

·        עבור טקסטים בעלי קנה מידה גדול תידרש ניגודיות של 1:3.

·        גופנים מומלצים לשימוש ממשפחתSans-serif כגון Arial, Tahoma, Helvetica.

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