נגישות ל- WEB

1. נגישות ל- WEB נובמבר 2008

2. מטרת המפגש • מהי נגישות ל WEB? • למה צריך להנגיש? • איך נראה אתר נגיש? • מה נעשה בעולם ובארץ בתחום? • מהם כללי הנגישות? • מה כולל תהליך ההנגשה? • מהו התפקיד של כל אחד מאתנו? מטרת המפגש

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

4. מהי נגישות לאינטרנט? • משתמשים בעלי מוגבלויות: ראייה עיוורים, כבדי ראיה, עיוורי צבעים מוטוריקה אי יכולת להפעיל עכבר ו/או מקלדת, תגובה איטית, קושי במוטוריקה עדינה שמיעה חרשים, כבדי שמיעה קוגניציה לקויות קוגניטיביות כגון הפרעות קשב וריכוז, דיסלקציה וכד' שפה אנשים שאינם דוברים עברית ברמת שפת אם (עולים חדשים, בני מיעוטים) בעיית נגישות כאלה ואחרות לפחות ל- 65% מהאוכלוסייה מהי נגישות לאינטרנט?

5. למה להנגיש? • היבט חוקי – פרק הנגישות בחוק שוויון זכויות לאנשים עם מוגבלויות. • היבט מוסרי – אינטרנט לכולם. • היבט חברתי – צמצום הפער הדיגיטאלי. • היבט כלכלי – נגישות, אם מתוכננת מראש, מעלה ב 5% את תקציב הפיתוח, מגדילה את מספר הגולשים הפוטנציאלי ב 25%. מוזילה עלויות תפעול. • סטנדרטיזציה – משתלב בסטנדרטים המקובלים ב-Web ובמדריך הסטנדרטים לאתרי ממשלה. • שימושיות - נגישות מעלה את השימושיות של האתר. • תדמית – שיפור בתדמית הארגון. • חיפוש – גורמת לתוצאות טובות במנועי חיפוש. Google הוא העיוור הגדול ביותר בעולם. למה להנגיש?

6. מהו אתר נגיש? • אתר שקהל רחב ככל האפשר יכול • לתפוס • להפעיל • להבין • יציבות טכנולוגית • איך נראה אתר נגיש? מהו אתר נגיש?

7. מהו אתר נגיש?

8. מהו אתר נגיש?

9. מה נעשה בעולם ובארץ? • ההנחיות המקובלות בעולם פותחו ע"י: ואומצו ע"י מדינות רבות בעולם גרסה 1 נוכחית משנת 1999 גרסה 2 אפריל 2008 שוחררה לעולם • החוק - פרק הנגישות בחוק שוויון זכויות לאנשים עם מוגבלויות. החוק קובע, את חובתם של גופים ציבוריים לתת שירות לאנשים עם מוגבלות במסגרת השירותים הניתנים והמיועדים לכלל הציבור, תוך ביצוע ההתאמות הנדרשות. • התקנות - משרד המשפטים כותב את תקנות הנגישות לאינטרנט ומפנה לסטנדרטים של ה W3C. בעולם מה נעשה כבר? בארץ

10. טכנולוגיה מסייעת • אנשים עם מוגבלות, נעזרים בטכנולוגיה מסייעת • הטכנולוגיה המסייעת, היא תוכנה או חומרה • המאפשרת "לעקוף" את המוגבלות. • עזרים – שימוש בטכנולוגיה מסייעת, כגון, עכברים ומקלדות מיוחדים, תוכנות מקריאות מסך וכד'. • סביבה נגישה – מערכות ההפעלה, התוכנות ואתרי האינטרנט צרכים להיות מותאמים לשימוש בטכנולוגיה נגישה. • דוגמא:קוראי מסךJAWS : או Virgo • תוכנת קורא מסך המאפשרת לעבוד עם צג ברייל ועם חיווי קולי. • מאפשרת לאדם עיוור לעבוד מול מחשב באופן עצמאי לחלוטין בכל יישום כגון מעבד תמלילים , אינטרנט, דואר אלקטרוני וכו' בצורה קלה ונוחה. טכנולוגיה מסייעת

11. כללי הנגישות • כללי נגישות עיקריים (על פי גרסה 2): • ניתן לתפיסה (Perceivable) • בר הפעלה (Operable) • מובן (Understandable) • יציבות טכנולוגית(Robust) • תחת כל כלל נגישות עיקרי יש פירוט של מספר כללי נגישות ולכל כלל יש קריטריונים לבדיקה המסווגים לפי שלוש רמות: כללי הנגישות A רמה ראשונה ובסיסית – גופים פרטיים AA רמה שניה – אתרי רשויות, משרדי ממשלה AAA רמה שלישית – הגבוהה ביותר

12. כללי הנגישות - תפיסה • ניתן לתפיסה (Perceivable) וודאו שכל התכנים מוצגים באופן שהמשתמש יוכל לתפוס 1.1ספקו חלופה טקסטואלית לכל תוכן שאינו טקסטואלי. 1.2 עבור מולטימדיה, ספקו חלופה טקסטואלית מסונכרנת. 1.3 צרו תוכן שאפשר להציגו במספר אופנים (תצוגה פשוטה, הקראה, הגדלה) 1.4 הקלו על אנשים עם מוגבלויות לראות ולשמוע (צרו הבחנה ברורה בין תוכן לרקע). כללי הנגישות

13. כללי הנגישות - תפיסה 1.1. ספקו חלופות טקסטואליות לכל התכנים שאינם טקסט • טקסט חלופי מאפשר לאנשים שאינם רואים ולמנועי חיפוש לקבל מידע על תכנים ויזואליים. יש לתת טקסט חלופי לתמונות, באנרים, אנימציות וכיו"ב. >IMG src=“search.gif" alt="חפש"> כללי הנגישות חשוב: הטקסט החלופי יתאר את הפונקציונאליות ו/או המידע המועבר באמצעות האלמנט הויזואלי. תמונות המשמשות לקישוט או ריווח בלבד Alt=“”

14. כללי הנגישות - תפיסה 1.1. ספקו חלופות טקסטואליות לכל התכנים שאינם טקסט • חלופה ל- CAPTCHA כללי הנגישות

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

16. פירוט כללי הנגישות - תפיסה 1.3. צרו תוכן שאפשר להציגו במספר אופנים • מידע ויחסים המועברים למשתמש באמצעות עיצוב - צור הפרדה בין תוכן/מידע ומבנה לבין תצוגה. ההפרדה תישמר גם אם המשתמש או האמצעי ישנה את פורמט התצוגה. • מידע מבנה והיחסים - ספק מידע באמצעותו המשתמש יכול להבין (באמצעים טכנולוגים) מהו מידע מבנה והיחסים בין חלקי המידע: • השתמש ב TH לכותרות • שימוש ב caption element כדי לקשר בין כותרת הטבלה לטבלה • שימוש ב summary element לתיאור תוכן הטבלה כללי הנגישות

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

18. כללי הנגישות - תפיסה כללי הנגישות

19. כללי הנגישות - תפיסה 1.4. הקלו על המשתמש לראות ולשמוע מידע • שימוש בצבע - כאשר נעשה שימוש בצבע כדי להעביר מידע, השתמש באלמנט ויזואלי נוסף שיצור את ההבחנה (גודל פונט, בולד, איקון, מסגרת). • שליטה על אודיו - אפשר לכבות או להשקיט סאונד המושמע באופן אוטומטי (יותר מ 3 שניות). • קונטרסט - הקפד על קונטרס של 5:1 בין הרקע לטקסט. בתמונות הקונטרסט צריך להיות 3:1. (AA) • הגדלת טקסט - אפשר הגדלה של עד 200% של טקסטים ללא שימוש בעזרים מיוחדים (AA) • הערה: ניתן לספק למשתמש שליטה בצבעוניות וגודל בממשק האתר כללי הנגישות

20. כללי הנגישות - תפיסה מה תופס עיוור צבעים? מה כתוב משמאל ללוגו של החברה? מה כתוב בתמונה מעל המשאית? כללי הנגישות

21. כללי הנגישות – בר הפעלה • בר הפעלה (Operable) וודאו שכל המשתמשים יכולים להפעיל את ממשק האתר 2.1הבטיחו שכל הפעולות ניתנות לביצוע באמצעות מקלדת. 2.2 תנו למשתמשים מספיק זמן לקריאה, לאינטראקציה או לתגובה. 2.3 אל תצרו תוכן שעלול לגרום להתקף אפילפטי. 2.4 עזרו למשתמשים לנווט, להתמצא ולמצוא מידע. כללי הנגישות

22. כללי הנגישות – בר הפעלה • כל הפעולות באתר צריכות להיות מבוצעות באמצעות מקלדת • (שימו לב שבהרבה אתרים התפריטים אינם נגישים דוגמא לתפריט נגיש) • שינויים שמתרחשים כתוצאה מ onmouseover יבוצעו גם ב onfocus • יש לשמור על TabIndex תקין ולוגי (באמצעות (TabIndex. • לא יהיה מצב בו המשתמש במקלדת נכנס לרכיב במסך ואינו יכול לצאת ממנו באמצעות המקלדת. לדוגמא הפורטל הגדול • לדוגמא – אם יש applet שמשתלט על ניהול הfocus ה applet ידאג להחזיר את ה focus לעמוד, או שיכלול הסבר ופונקציונאליות המחזירה את הפוקוס לעמוד. 2.1. הבטיחו שכל הפעולות ניתנות לביצוע באמצעות מקלדת כללי הנגישות

23. כללי הנגישות – בר הפעלה • כוונון זמן - בכל מצב של הגבלת זמן, אפשר למשתמש לבצע אחת מהפעולות הבאות: • (למעט מקרים שהגבלת הזמן הכרחית – מכירה פומבית, או משחק על זמן) • לכבות את הגבלת הזמן. • להתאים את הגבלת הזמן. • להגדיל את הגבלת הזמן – ע"י הודעה לפני ה Timeout • שימו לב redirect או auto refresh מפריעים לעבודת "קורא המסך" – יש לאפשר למשתמש לעצור אותם. • עצירה – ניתן לעצור תנועה, הבהוב, גלילה או עדכון אוטומטי של תוכן (AA) 2.2 תנו למשתמשים מספיק זמן לקריאה, לאינטראקציה או לתגובה כללי הנגישות

24. כללי הנגישות – בר הפעלה • אסור לתוכן לרצד יותר מ- 3 פעמים בשנייה אלא אם כן ההבזק הוא נמוך מהתקרה שנקבעה ע"י ה- W3C. 2.3 אל תצרו תוכן שעלול לגרום להתקף אפילפטי כללי הנגישות

25. כללי הנגישות – בר הפעלה • עקיפת בלוקים - ספק מנגנון לעקיפת בלוקים של תוכן שחוזרים על עצמם בהרבה עמודים (כגון תפריטים- דילוג לתוכן העמוד). • כותרת לעמוד - Page Title ייחודי לעמוד המתאר את תוכן העמוד. • Focus Order לוגי –באמצעות Tabindex. • מטרת הקישור צריכה להיות ברורה וייחודית (הקישור לא יהיה "לחץ כאן" "לפרטים נוספים"). • קיימת יותר מדרך אחת לאתר מידע(AA) - מפת אתר, מנוע חיפוש, תוכן עניינים וכד'. • כותרות ו labels תיאוריים(AA). • נראות של ה Focus (AA). 2.4 עזרו למשתמשים לנווט, להתמצא ולמצוא מידע כללי הנגישות

26. כללי הנגישות - מובנות • מובן (Understandable) צרו תכנים ואמצעי אינטראקציה מובנים לכמה שיותר משתמשים 3.1קריאות ומובנות של התכנים. 3.2 סידור מסך עקבי והתנהגות צפויה של מרכיבים אינטראקטיביים. 3.3 עזרו למשתמשים להימנע מטעויות ולתקן טעויות שביצעו. כללי הנגישות

27. כללי הנגישות - מובנות • הגדרת שפה ברמת העמוד. • הגדרת שפה בכל חלקי העמוד (AA). • פרוש לקיצורים ראשי תיבות מינוחים מקצועיים (AAA). • מי יודע מה זה משכי"ת, ד"ש, מש"ל, מפמ"ר 3.1קריאות ומובנות של התכנים כללי הנגישות

28. כללי הנגישות - מובנות • On Focus - לא גורם לשינוי של תכנים ולביצוע פעולה. • On Input הזנה של תוכן ע"י המשתמש אינה גורמת לשינוי תוכן או ביצוע פעולה, ללא ידוע המשתמש מראש. • קונסיסטנטיות בניווט (AA). • קונסיסטנטיות בזיהוי מרכיבי מסך (AA). 3.2 סידור מסך עקבי והתנהגות צפויה של מרכיבים אינטראקטיביים כללי הנגישות

29. כללי הנגישות - מובנות • זיהוי טעויות באופן אוטומטי – ותאור הפריט למשתמש. שימו לב הודעת השגיאה צריכה לכלול את שם השדה במדויק. רצוי לקשר את הודעת השגיאה לשדה. • אספקה של כותרות(labels) והוראות ברורות. • עזרה בתיקון - אם זוהתה טעות וניתן להציע עזרה, יש להציע אותה (AA). • מניעת טעויות (בתהליך משפטי, כלכלי, או נתונים) יש לאפשר אחד מהבאים (AA): • הפעולה הפיכה • בדיקת הנתונים לפני המעבר לשלב הבא • הצגה של הנתונים, אפשרות לשינוי ואישור המשתמש לפני ביצוע הפעולה 3.3עזרו למשתמשים להימנע מטעויות ולתקן טעויות שביצעו כללי הנגישות

30. כללי הנגישות – יציבות טכנולוגית • יציבות טכנולוגית (Robust) 4.1 השתמשו בטכנולוגיות web שעובדות באופן מכסימלי עם טכנולוגיה מסייעת וסוכני משתמש בהווה ובעתיד. כללי הנגישות

31. כללי הנגישות – יציבות טכנולוגית • כתיבת קוד תקינה - TAG התחלה וסיום לכל אלמנט וקינון נכון של הקוד. • שם, תפקיד וערך לכל Control השתמש בפקדי טופס ולינקים של HTML לדוגמא: • השתמש באלמנט label בכדי לקשר תוויות טקסט לפקדי טופס. • השתמש ב-title attribute של אלמנט frame. • השתמש ב-title attribute בכדי לזהות פקדי טופס כאשר לא ניתן להשתמש באלמנט label. 4.1 תאימות ל user agents עכשויים ועתידים (כולל טכנולוגיה מסייעת) כללי הנגישות

32. כללי הנגישות – יציבות טכנולוגית • שימוש באלמנט label כדי לקשר בין control בטופס לטקסט שמתאר אותו: • שימוש באלמנטים fieldset & legend בכדי לתאר קבוצה של controls בטופס (רלוונטי ל checkbox ו radio buttons) • דוגמא לא טובה. 4.1 תאימות ל user agents עכשויים ועתידים - טפסים <label for="firstname">First name:</label> </ "input type="text" name="firstname” id="firstname"> כללי הנגישות

33. כללי הנגישות – יציבות טכנולוגית • שימוש ב Title כדי לזהות שדות כאשר אין אפשרות להשתמש ב label. לדוגמא: שדה של מספר טלפון המפוצל לקידומת ולמספר : 4.1 תאימות ל user agents עכשויים ועתידים - טפסים מספר טלפון: - <fieldset><legend>Phone number</legend> <input id="areaCode" name="areaCode" title="Area Code" type="text" size="3" value="" > <input id="exchange" name="exchange" title="First three digits of phone number" type="text" size="3" value="" > <input id="lastDigits" name="lastDigits" title="Last four digits of phone number" type="text" size="4" value="" > </fieldset> כללי הנגישות

34. כללי הנגישות - סיכום • חלופות • שליטה של המשתמש – זמן, תצוגה, אודיו • מובחנות ויזואלית ושמיעתית • הפרדה בין תוכן לתצוגה • עקביות והתנהגות ניתנת לחיזוי • מניעת טעויות וסיוע • סטנדרטים סיכום הנחיות הנגישות על רגל אחת: כללי הנגישות

35. בדיקת יישום כללי נגישות – סרגל נגישות • סרגל הנגישות יודע לבצע את הפעולות הבאות: • בדיקות נגישות אוטומטיות • בדיקת תקינות HTML • בדיקת תקינות CSS • בדיקת תקינות קישורים • בדיקת רזולוציות • צפייה ונטרול CSS • תמונות: צפייה ברשימה; הסרה • צבעים: בדיקת קונטרסט ועיוורון צבעים • מבנה: Tab Order, Tab Index, כותרות, רשימות, פסקאות, Access Keys • טבלאות: כותרות, גבולות, סדר תאים • Frames: שמות, גבולות • ועוד... כללי הנגישות

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

37. תהליך ההנגשה סרטון – הקדמה לקוראי מסך תהליך ההנגשה

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

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

40. ב ה צ ל ח ה