נגישות לאינטרנט הלכה למעשה - הנחיות וטכניקות

1. נגישות לאינטרנט הלכה למעשה - הנחיות וטכניקות גילה גרטל | יועצת נגישות לאינטרנט

2. הנחיות נגישות אתרים WCAG • חשוב לדעת! • גרסה 1 נוכחית משנת 1999 • טיוטא סופית לגרסה 2 אפריל 2008 תהפוך לגרסה רשמית במהלך 2008. • שתי הגרסאות דומות מבחינת המהות והדרישות • שלוש רמות נגישות: • A – רמה ראשונה (בסיסית) –בתקנות הישראליות תחייב אתרי גופים פרטיים • AA – רמה שנייה –בתקנות הישראליות תחייב אתרי רשויות • AAA – רמה שלישית • ההבדלים בין הגרסאות: • גרסה 1 תלוית טכנולוגיה. גרסה 2 הנחיות ברמה העקרונית ללא תלות בטכנולוגיה. • קיימים שינויים בחלק מההנחיות וברמת הנגישות אליהן הן משויכות.

3. מבנה גרסה 2 של הנחיות הנגישות • ארבעה עקרונות (Principles) נגישות עיקריים: • ניתן לתפיסה (Perceivable) • בר הפעלה (Operable) • מובן (Understandable) • יציבות טכנולוגית(Robust) • תחת כל עקרון יש מספר הנחיות (Guide lines) • לכל הנחיה מוגדרים קריטריונים להצלחה • (Success Criteria) המסווגים לפי שלוש • רמות הנגישות. • לכל קריטריון יש טכניקות ליישום, טכניקות לא ראויות והגדרת בדיקה. • במצגת זו נציג את כל הנחיות הנגישות ברמה A ו AA וניתן דוגמאות לטכניקות ליישום חלק מההנחיות. 1.Principle 1.1 Guide line 1.1.1Success Criteria 1.1.2 Success Criteria 1.2 Guide line 1.2.1 Success Criteria 1.2.2 Success Criteria 2.Principle 2.1 Guide line 2.1.1Success Criteria 2.1.2 Success Criteria 1.2 Guide line 2.2.1 Success Criteria 2.2.2 Success Criteria

4. 1 עקרון התפיסה (perceivable): וודא שכל התכנים מוצגים באופן שהמשתמש יוכל לתפוס הנחיות: 1.1 חלופה טקסטואלית לתוכן שאינו טקסטואלי. 1.2 ספק חלופה טקסטואלית מסונכרנת למדיה מבוססת זמן. 1.3 צור תוכן שאפשר להציגו במספר אופנים (תצוגה פשוטה, הקראה, הגדלה) 1.4 מובחנות – אפשר למשתמש לראות ולשמוע מידע

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

6. כללי נגישות – תפיסה 1.1. ספק חלופות טקסטואליות לכל התכנים שאינם טקסט • אפשר לקוראי מסך להתעלם מתוכן גרפי (תמונה, פלאש וכד') שאין בו מידע – כלומר משמש לדקורציה בלבד • תמונות המשמשות לקישוט או ריווח בלבד Alt=“”, • פלאש המשמש לקישוט בלבד >object ...><param name="wmode" value="opaque"><embed wmode="opaque" ...></embed></object<

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

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

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

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

12. כללי נגישות – תפיסה 1.3. צור תוכן שאפשר להציגו במספר אופנים Drilldown h1 { letter-spacing: 1em; font-family: Times, serif; font-size:400%; font-weight:bold; } • כותרות – h1-h6 המבטאות בצורה אמינה את היררכית המידע. רצוי להגדיר ב CSS את ה Style שלהם • רשימות – ניתן לניתן להגדיר ב-CSS תמונה כ-bullet כחלק מהגדרת עיצוב הרשימה. תפריטים –באמצעות רשימה • כותרות ל frame ול iframe • טפסים (פרוט בהמשך) • טבלאות נתונים (פרוט בהמשך) ul { List-style: square inside url('arrow.gif') }

13. כללי נגישות – תפיסה 1.3. צור תוכן שאפשר להציגו במספר אופנים טבלאות נתונים פשוטות Drilldown • השתמש ב TH לכותרות • שימוש ב caption element כדי לקשר בין כותרת הטבלה לטבלה • שימוש ב summary element לתיאור תוכן הטבלה • קיצור כותרות – attribute abbr <th abbr="Employees">Number of Employees</th>

14. כללי נגישות – תפיסה 1.3. צור תוכן שאפשר להציגו במספר אופנים טבלאות נתונים מורכבות Drilldown שימוש ב scope attribute כדי לקשר בין תאים בטבלה לכותרות <tablesummary="The number of employees and the foundation year of some imaginary companies."> <caption>Table 1: Company data</caption> <tr> <td></td> <thscope="col">Employees</th> <thscope="col">Founded</th> </tr> <tr> <thscope="row">ACME Inc</th> <td>1000</td> <td>1947</td> </tr> <tr> <thscope="row">XYZ Corp</th> <td>2000</td> <td>1973</td> </tr> </table>

15. כללי נגישות – תפיסה 1.3. צור תוכן שאפשר להציגו במספר אופנים טבלאות נתונים מורכבות Drilldown <tableclass="extbl"summary="The number of employees and the foundation year of some imaginary companies."> <caption>Table 1: Company data</caption> <tr> <tdrowspan="2"></td> <thid="employees"colspan="2">Employees</th> <thid="founded"rowspan="2">Founded</th> </tr> <tr> <thid="men">Men</th> <thid="women">Women</th> </tr> <tr> <thid="acme">ACME Inc</th> <tdheaders="acme employees men">700</td> <tdheaders="acme employees women">300</td> <tdheaders="acme founded">1947</td> </tr> <tr> <thid="xyz">XYZ Corp</th> <tdheaders="xyz employees men">1200</td> <tdheaders="xyz employees women">800</td> <tdheaders="xyz founded">1973</td> </tr> </table> דרך נוספת - שימוש ב ID ו Header כדי לקשר בין תאים בטבלה לכותרות

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

17. לדוגמא – מה תופס עיוור צבעים? מה כתוב משמאל ללוגו של החברה? מה כתוב בתמונה מעל למשאית? הסימולציה לעיוורון צבעים באמצעות אתר http://www.vischeck.com

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

19. כללי נגישות – הפעלה 2.1 הבטח שכל הפעולות ניתנות לביצוע באמצעות מקלדת. • כל הפעולות באתר צריכות מבוצעות באמצעות מקלדת • (שימו לב לתפריטים – בהרבה אתרים הם לא נגישים) • אלמנטים שיש להם onmouseover attribute צרכים שיהיה להם גם onfocus attribute וה event handlers המקושרים אליהם צרכים ליצור את אותן פעולות. • אלמנטים שיש להם onmouseout attribute צרכים שיהיה להם גם onblur attribute וה event handlers המקושרים אליהם צרכים ליצור את אותן פעולות. • יש לשמור על TabIndex תקין ולוגי (באמצעות (TabIndex.

20. כללי נגישות – הפעלה 2.1 אין "מלכודות" מקלדת לא יהיה מצב בו המשתמש במקלדת נכנס לרכיב במסך ואינו יכול לצאת ממנו באמצעות המקלדת. לדוגמא – אם יש applet שמשתלט על ניהול הfocus ה applet ידאג להחזיר את ה focus לעמוד, או שיכלול הסבר ופונקציונאליות המחזירה את הפוקוס לעמוד.

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

22. כללי נגישות – הפעלה 2.3 אל תיצור תוכן שעלול לגרום להתקף אפילפטי. • תוכן אינו מרצד יותר מ 3 פעמים בשנייה או שהריצוד נמוך מ general flash and red flash thresholds.

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

24. כללי נגישות 3 עקרון המובנות (Understandable): צור תכנים ואמצעי אינטראקציה מובנים לכמה שיותר משתמשים הנחיות: 3.1 קריאות ומובנות של התכנים. 3.2 סידור מסך עקבי והתנהגות של מרכיבים אינטראקטיבים ניתנת לחיזוי. 3.3 עזור למשתמשים להימנע מטעויות ולתקן טעויות שביצעו.

25. כללי נגישות – מובנות 3.1קריאות ומובנות של תכנים • הגדרת שפה ברמת העמוד • הגדרת שפה בכל חלקי העמוד (AA) • פרוש לקיצורים ראשי תיבות מינוחים מקצועיים (AAA)

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

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

28. כללי נגישות 4 עקרון היציבות טכנולוגית (Robust): הנחיות: 4.1 השתמש בטכנולוגיות web שעובדות באופן מקסימלי עם טכנולוגיה מסייעת וסוכני משתמש בהווה ובעתיד

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

30. כללי נגישות – תפיסה 4.1 תאימות ל user agents עכשויים ועתידים (כולל טכנולוגיה מסייעת) טפסים Drilldown • שימוש באלמנט label כדי לקשר בין control בטופס לטקסט שמתאר אותו • שימוש באלמנטים fieldset & legend בכדי לתאר קבוצה של controls בטופס (רלוונטי ל checkbox ו radio buttons) <label for="firstname">First name:</label> </ "input type="text" name="firstname" id="firstname"> <fieldset> <legend>I am interested in the following (check all that apply):</legend> <input type="checkbox" id="photo" name="interests" value="ph"> <label for="photo">Photography</label><br /> <input type="checkbox" id="watercol" name="interests" checked="checked" value="wa"> <label for="watercol">Watercolor</label><br /> <input type="checkbox" id="acrylic" name="interests" checked="checked" value="ac"> <label for="acrylic">Acrylic</label> … </fieldset>

31. כללי נגישות – תפיסה 4.1 תאימות ל user agents עכשויים ועתידים (כולל טכנולוגיה מסייעת) טפסים Drilldown שימוש ב Title כדי לזהות שדות כאשר אין אפשרות להשתמש ב label. לדוגמא: שדה של מספר טלפון המפוצל לקידומת ולמספר. מספר טלפון: - <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>

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

33. מקורות אתר "נגיש" www.nagish.org.il יוזמת הנגישות של w3c http://www.w3.org/WAI/ הנחיות נגישות 1.0 WCAG http://www.w3.org/TR/WCAG10/ הנחיות נגישות 2.0 WCAG http://www.w3.org/TR/WCAG20/ נגישות Rich Applications(ARIA) Ajax, HTML, JavaScript http://www.w3.org/WAI/intro/aria.php

34. תודה שאלות?