מצגת לכנס וורדקאמפ 2010 W3C ישראל www.w3c.org.il

1. ‫0102/9/5‬
‫כלים ושיטות להנגשת אתרי אינטרנט‬
‫אייל סלע‬
‫מנהל פרויקטים, איגוד האינטרנט הישראלי‬
‫ומשרד ה-‪ W3C‬הישראלי‬
‫‪www.isoc.org.il‬‬
‫‪www.w3c.org.il‬‬ ‫37 1‬
‫‪eyal@isoc.org.il‬‬

2. ‫או‬
‫21 דברים שצריך לדעת על נגישות באינטרנט‬
www.isoc.org.il
www.w3c.org.il 2 73
eyal@isoc.org.il

3. j.mp/w3cdoc
www.isoc.org.il
www.w3c.org.il 3 73
eyal@isoc.org.il

4. ‫תוכנית...‬
‫מבוא‬ ‫•‬
‫נגישות‬ ‫•‬
‫כלים‬ ‫•‬
‫21 קווים מנחים‬ ‫•‬
‫איך מתחילים‬ ‫•‬
‫‪www.isoc.org.il‬‬
‫‪www.w3c.org.il‬‬ ‫37 4‬
‫‪eyal@isoc.org.il‬‬

5. ‫אודות: איגוד האינטרנט הישראלי‬
‫שלוחת האיגוד הבינלאומי:‬
‫עמותה ללא מטרת רווח‬
‫פועל לקידום האינטרנט והטמעתו בישראל‬
‫כתשתית טכנולוגית, מחקרית, חינוכית, חברתית‬
‫ועסקית.‬
‫‪www.isoc.org.il‬‬
‫‪www.w3c.org.il‬‬ ‫37 5‬
‫‪eyal@isoc.org.il‬‬

6. ‫‪W3C‬‬
‫ארגון בינלאומי‬
‫כ-053 ארגונים‬
‫פורום ניטראלי ליצירת תקני רשת באינטרנט.‬
‫משימה:‬
‫להוביל את הרשת למיצוי הפוטנציאל על ידי פיתוח‬
‫פרוטוקולים וקווים מנחים שיאפשרו את צמיחתה לטווח‬
‫ארוך.‬
‫‪www.isoc.org.il‬‬
‫‪www.w3c.org.il‬‬ ‫37 6‬
‫‪eyal@isoc.org.il‬‬

7. ‫נגישות‬
www.isoc.org.il
www.w3c.org.il 7 73
eyal@isoc.org.il

8. ‫מוגבלויות המשפיעות על השימוש באינטרנט:‬
‫(קוראי מסך, ברייל)‬ ‫עיוורון‬
‫ראייה לקויה (מגדילי מסך)‬
‫עיוורון צבעים‬
‫שמיעה‬
‫קוגניציה‬
‫מוטוריקה (עזרי ניווט, אי שימוש בעכבר)‬
‫‪www.isoc.org.il‬‬
‫‪www.w3c.org.il‬‬ ‫37 8‬
‫‪eyal@isoc.org.il‬‬

9. ‫מהו אתר נגיש?‬
‫אתר המאפשר לאנשים עם מוגבלות לגלוש באותה רמה‬
‫של יעילות והנאה ככל הגולשים.‬
‫‪www.isoc.org.il‬‬
‫‪www.w3c.org.il‬‬ ‫37 9‬
‫‪eyal@isoc.org.il‬‬

10. ‫נגישות זה גם....‬
‫(יותר קהל, יותר מצליחים להשתמש)‬ ‫‪ROI‬‬
‫‪( SEO‬פשוט ככה...)‬
‫שימושיות (תת קבוצה)‬
‫‪( Mobile‬יש חפיפה בין צרכי המשתמשים)‬
‫מקצועיות (מרגישים את ההבדל)‬
‫חוק (בקרוב...)‬
‫עתיד (עלייה בתוחלת החיים)‬
‫‪www.isoc.org.il‬‬
‫‪www.w3c.org.il‬‬ ‫37 01‬
‫‪eyal@isoc.org.il‬‬

11. ...‫אה כן‬
‫אנשים‬
www.isoc.org.il
www.w3c.org.il 11 73
eyal@isoc.org.il

12. ?‫על מה אנחנו מדברים‬
www.isoc.org.il
www.w3c.org.il 12 73
eyal@isoc.org.il

13. (WCAG) 2.0 ‫הנחיות להנגשת תכני אתרי אינטרנט‬
j.mp/w3av2 www.isoc.org.il
www.w3c.org.il 13 73
eyal@isoc.org.il

14. ‫4 עקרונות‬

‫21 קווים מנחים‬

‫מדדי הצלחה‬
))
‫שיטות‬
j.mp/w3ada www.isoc.org.il
www.w3c.org.il 14 73
eyal@isoc.org.il

15. AAA ,AA ,A – ‫שלוש רמות נגישות‬
www.isoc.org.il
www.w3c.org.il 15 73
eyal@isoc.org.il

16. ‫כלים‬
www.isoc.org.il
www.w3c.org.il 16 73
eyal@isoc.org.il

17. HTML, CSS-‫כלי עזר: מנוע חיפוש לאלמנטים ב‬
– ‫וגם‬
‫• נגישות‬
Mobile •
SVG •
...‫דוגמא‬
j.mp/w3cmo8 www.isoc.org.il
www.w3c.org.il 17 73
eyal@isoc.org.il

18. title ‫דוגמא – חיפוש‬
www.w3c.org.il

19. nagish.org.il
It’s wordpress!
www.isoc.org.il
www.w3c.org.il 19 73
eyal@isoc.org.il

20. Techniques for WCAG 2.0 (single file)
j.mp/w3il64 www.isoc.org.il
www.w3c.org.il 20 73
eyal@isoc.org.il

21. ‫21 קווים מנחים‬
21
www.w3c.org.il

22. ‫עקרון 1: נתפס‬
)perceive( ‫ניתן 'לתפוס' מבחינה חושית‬
.‫את תוכן האתר‬
www.isoc.org.il
www.w3c.org.il 22 73
eyal@isoc.org.il

23. ‫1.1 חלופה טקסטואלית (תיאור תמונה, פקדים‬
) CAPTCHA-‫בטפסים, חלופה ל‬
j.mp/w3il50 www.isoc.org.il
www.w3c.org.il 23 73
eyal@isoc.org.il

24. alt-‫שימוש ב‬
<img src="newsletter.gif" alt="Free
newsletter. Get free recipes, news, and
more. Learn more." />
j.mp/w3il51 www.isoc.org.il
www.w3c.org.il 24 73
eyal@isoc.org.il

25. Label element or title attribute
<label for="searchTerm">Search for:</label>
<input id="searchTerm" type="text" size="30"
value="" name="searchTerm">
<select title="Search in" id="scope"> …
</select>
j.mp/w3il52 www.isoc.org.il
www.w3c.org.il 25 73
eyal@isoc.org.il

26. ‫טקסט חלופי‬
www.w3c.org.il
26

27. ‫2.1 חלופות עבור מדיה מבוססת-זמן (כתוביות לוידאו, או‬
‫קול, תיאורים כתובים של צלילים משמעותיים, תיאורי אודיו‬
‫למידע חזותי משמעותי)‬
‫‪www.isoc.org.il‬‬
‫‪www.w3c.org.il‬‬ ‫37 72‬
‫‪eyal@isoc.org.il‬‬

28. ‫3.1 תוכן הניתן להתאמה (תגיות נכונות וסמנטיות, הפרדת‬
‫תוכן מעיצוב, קרבה בין אלמנטים קשורים, זיהוי כותרות‬
‫ורשימות)‬
‫‪www.isoc.org.il‬‬
‫‪www.w3c.org.il‬‬ ‫37 82‬
‫‪eyal@isoc.org.il‬‬

29. ‫6. הפרידו תוכן מעיצוב‬
‫אותו אתר,‬
‫ללא ‪CSS‬‬
‫• ‪ HTML‬לתוכן‬
‫• ‪ CSS‬לעיצוב‬
‫דוגמא...‬
‫• עיצוב ללא טבלאות‬
‫321‪j.mp/dkrg‬‬ ‫‪www.isoc.org.il‬‬
‫‪www.w3c.org.il‬‬ ‫37 92‬
‫‪eyal@isoc.org.il‬‬

30. ‫דוגמא – שינוי עיצוב‬
csszengarden.com standards.co.il
www.isoc.org.il
www.w3c.org.il 30 73
eyal@isoc.org.il

31. ‫אלמנטים סמנטיים‬
‫כותרות‬ -
‫רשימות‬ -
‫הדגשה‬ -
... -
www.isoc.org.il
www.w3c.org.il 31 73
eyal@isoc.org.il

32. ‫תגיות – העברת משמעות רק בעיצוב‬
‫‪www.w3c.org.il‬‬

33. ...CSS ‫בלי‬
www.w3c.org.il

34. ?‫פתרון‬
j.mp/w3il61
www.w3c.org.il

35. ‫4.1 בר הבחנה (הפרדת חזית מרקע – אי שימוש בצבע בלבד‬
‫למשמעות, גודל אותיות בר הגדלה, אי שימוש בתמונה כטקסט,‬
‫ניגודיות)‬
‫‪www.isoc.org.il‬‬
‫‪www.w3c.org.il‬‬ ‫37 53‬
‫‪eyal@isoc.org.il‬‬

36. ‫שימוש בצבע‬
‫הדגישו גם באמצעות עיבוי, הוספת מסגרת, 1שינוי רקע‬
‫8‪j.mp/w3ad‬‬ ‫‪www.isoc.org.il‬‬
‫‪www.w3c.org.il‬‬ ‫37 63‬
‫‪eyal@isoc.org.il‬‬

37. ‫ניגוד-צבעים‬
‫יחס-ניגוד של לפחות 1:5.4‬
‫כי קשה לקרוא כאשר אין מספיק‬
‫ניגודיות‬
‫)השתמשו בבודק ניגודיות: 9‪)j.mp/w3ad‬‬
‫75‪j.mp/w3il‬‬ ‫‪www.isoc.org.il‬‬
‫‪www.w3c.org.il‬‬ ‫37 73‬
‫‪eyal@isoc.org.il‬‬

38. ‫עקרון 2: ניתן להפעלה‬
‫המרכיבים והניווט ניתנים להפעלה.‬
‫‪www.isoc.org.il‬‬
‫‪www.w3c.org.il‬‬ ‫37 83‬
‫‪eyal@isoc.org.il‬‬

39. ‫1.2 תפקוד מלא ממקלדת (הגעה לכל הניווט, אין מלכודות‬
‫מקלדת)‬
‫‪www.isoc.org.il‬‬
‫‪www.w3c.org.il‬‬ ‫37 93‬
‫‪eyal@isoc.org.il‬‬

40. ‫ מקבילים‬event handlers-‫השתמשו ב‬
j.mp/w3il54 www.isoc.org.il
www.w3c.org.il 40 73
eyal@isoc.org.il

41. )‫אין תמיכה מלאה במקלדת (בתפריט עליון‬
whitehouse.gov
www.isoc.org.il
www.w3c.org.il 41 73
eyal@isoc.org.il

42. ‫ספקו חלופה לגרירה‬
‫מצב נגישות בוורדפרס‬
j.mp/w3il55 www.isoc.org.il
www.w3c.org.il 42 73
eyal@isoc.org.il

43. ‫2.2 מספיק זמן (הזהרה מפני סיום ‪ ,session‬אפשרות‬
‫הארכה, עצירת תנועה ואיתחולה, עצירת עדכונים, אי הקצבת‬
‫זמן לפעולה (אם אפשר) )‬
‫‪www.isoc.org.il‬‬
‫‪www.w3c.org.il‬‬ ‫37 34‬
‫‪eyal@isoc.org.il‬‬

44. ‫שליטה בעדכון אוטומטי‬
downrightnow.com www.isoc.org.il
www.w3c.org.il 44 73
eyal@isoc.org.il

45. ‫שמירת מידע בטופס בכדי אם נדרש אימות המשתמש‬
‫) לפני הגשתו‬authentication(
www.isoc.org.il
www.w3c.org.il 45 73
eyal@isoc.org.il

46. ‫3.2 מניעת התקפים (עצירת תזוזה, מנעת הבהובים וחלקים‬
‫זזים)‬
‫‪www.isoc.org.il‬‬
‫‪www.w3c.org.il‬‬ ‫37 64‬
‫‪eyal@isoc.org.il‬‬

47. In 1997, a cartoon on television in Japan sent
over 700 children to the hospital, including
about 500 who had seizures
j.mp/w3il56 www.isoc.org.il
www.w3c.org.il 47 73
eyal@isoc.org.il

48. ‫- לא יותר מ-3 הבהובים בשניה (או שאינו עובר את הסף)‬
‫- איזורים מהבהבים - קטנים‬
‫‪www.isoc.org.il‬‬
‫‪www.w3c.org.il‬‬ ‫37 84‬
‫‪eyal@isoc.org.il‬‬

49. ‫4.2 קלות ניווט ומציאת מידע (מספר דרכים לאותו תוכן,‬
‫דפים מובנים עם כותרות נכונות, קישורים ברורים, עקיפת‬
‫בלוקים החוזרים על עצמם, סדר פוקוס נכון, פוקוס נראה לעין)‬
‫‪www.isoc.org.il‬‬
‫‪www.w3c.org.il‬‬ ‫37 94‬
‫‪eyal@isoc.org.il‬‬

50. )‫קישור ישיר לתוכן (גלוי או מוסתר‬
nagish.org.il www.isoc.org.il
www.w3c.org.il 50 73
eyal@isoc.org.il

51. ‫ – מייד לאחר האלמנט‬DOM-‫• הכנסת תוכן דינמי ל‬
‫המפעיל‬
www.isoc.org.il
www.w3c.org.il 51 73
eyal@isoc.org.il

52. ‫קישורים ברורים ודילוג לתוכן‬
a span.hide {
height: 1px;
width: 1px;
position: absolute;
overflow: hidden;
top: -10px;
}
www.isoc.org.il
www.w3c.org.il 52 73
eyal@isoc.org.il

53. ?‫ בתגובות בוורדפרס‬tabindex ‫למה יש‬
www.isoc.org.il
www.w3c.org.il 53 73
eyal@isoc.org.il

54. ‫• השתמשו בפירורי לחם‬
‫• מפת אתר‬
www.isoc.org.il
www.w3c.org.il 54 73
eyal@isoc.org.il

55. ‫עקרון 3: ניתן להבנה‬
‫הטקסט ניתן לקראה ולהבנה‬
www.isoc.org.il
www.w3c.org.il 55 73
eyal@isoc.org.il

56. ‫1.3 טקסט בר הבנה (רמת הטקסט, זיהוי השפה בדף כולו‬
‫ובחלקיו, פירוש קיצורים וז'רגון)‬
‫‪www.isoc.org.il‬‬
‫‪www.w3c.org.il‬‬ ‫37 65‬
‫‪eyal@isoc.org.il‬‬

57. ‫זיהוי שפת הטקסט‬
<html lang="fr">
<html xml:lang="he”>
www.isoc.org.il
www.w3c.org.il 57 73
eyal@isoc.org.il

58. ‫הרחבת קיצורים‬
<p>Tasini <abbr title="and others">et
al.</abbr> <abbr
title="versus">v.</abbr> The New
York Times
www.isoc.org.il
www.w3c.org.il 58 73
eyal@isoc.org.il

59. ‫2.3 תפעול ותצוגה צפויים (אי שינוי ההקשר בפוקוס או בלי‬
‫שהמשתמש ביקש, ניווט עקבי)‬
‫‪www.isoc.org.il‬‬
‫‪www.w3c.org.il‬‬ ‫37 95‬
‫‪eyal@isoc.org.il‬‬

60. ‫לא לשנות את העמוד באופן משמעותי בגלל פוקוס‬
‫על אלמנט‬
‫‪w3c.org‬‬
‫‪www.w3c.org.il‬‬
‫06‬

61. ‫3.3 תמיכה בהזנה (הסבר מדויק לטעיות, הסבר על מה צריך‬
‫להזין, ולידציה, טקסט עזרה)‬
‫(בנייה חכמה של טפסים)‬
‫‪www.isoc.org.il‬‬
‫‪www.w3c.org.il‬‬ ‫37 16‬
‫‪eyal@isoc.org.il‬‬

62. ‫דרכי מניעת טעויות בטפסים‬
• Confirmed (review)
• Checked ( for input errors )
• Reversible
www.isoc.org.il
www.w3c.org.il 62 73
eyal@isoc.org.il

63. ‫עקרון 4 - יציבות‬
‫תאימות מרבית עם דפדפנים, תוכנות וכדומה‬
‫‪www.isoc.org.il‬‬
‫‪www.w3c.org.il‬‬ ‫37 36‬
‫‪eyal@isoc.org.il‬‬

64. ‫ (תג פתיחה וסגירה, קינון נכון, אי כפילות‬Parsing 4.1
)IDs are unique ,attributes
‫לכתוב קוד תקין‬
www.isoc.org.il
www.w3c.org.il 64 73
eyal@isoc.org.il

65. CSS-‫ וה‬HTML-‫בדקו את תקינות ה‬
validator.w3.org - HTML ‫• בודק תקינות‬
j.mp/w3add1 - CSS ‫• בודק תקינות‬
...‫דוגמא‬
www.isoc.org.il
www.w3c.org.il 65 73
eyal@isoc.org.il

66. )‫2.4 שם-תפקיד-ערך (שימוש בפקדים רגילים פותר את זה‬
www.isoc.org.il
www.w3c.org.il 66 73
eyal@isoc.org.il

67. :‫לדוגמה‬
checkbox ‫זהו‬
"‫שמֹו: "קראתי את תנאי השימוש‬ְׁ
."‫מצבו: "לא מסומן‬
<input type="checkbox" id="markuplang" name="computerskills"
checked="checked“ /> <label for="markuplang"> ‫קראתי את תנאי‬
‫/<השימוש‬label>
j.mp/w3addd www.isoc.org.il
www.w3c.org.il 67 73
eyal@isoc.org.il

68. :‫השתמשו ב‬
createElement()
createTextNode()
appendChild()
:‫ולא ב‬
object.innerHTML
document.write
:
j.mp/w3il58 www.isoc.org.il
www.w3c.org.il 68 73
eyal@isoc.org.il

69. Java accessiblity - j.mp/w3il59
Flash accessibility - j.mp/w3il60
www.isoc.org.il
www.w3c.org.il 69 73
eyal@isoc.org.il

70. ‫עזרה‬
accessifyforum.com
www.isoc.org.il
www.w3c.org.il 70 73
eyal@isoc.org.il

71. ?‫איך מתחילים‬
www.isoc.org.il
www.w3c.org.il 71 73
eyal@isoc.org.il

72. ‫1. קראו את 0.2 ‪( WCAG‬בעברית)‬
‫2. שימרו את הכלים מהמצגת – קרובים‬
‫(3. הרשמו למקורות מידע)‬
‫4. בזמן התכנון והפיתוח – היו בקרותיים וחישבו על‬
‫נגישות‬
‫‪www.isoc.org.il‬‬
‫‪www.w3c.org.il‬‬ ‫37 27‬
‫‪eyal@isoc.org.il‬‬

73. !‫צרו קשר‬
‫אייל סלע‬
eyal@isoc.org.il
@isociltech @eyalsela
www.isoc.org.il
www.w3c.org.il 73 73
eyal@isoc.org.il