http://www.w3c.org.il

1. ‫1102/2/32‬
‫כלים ושיטות להנגשת אתרי אינטרנט‬
‫על פי 0.2 ‪WCAG‬‬
‫אייל סלע‬
‫מנהל פרויקטים, איגוד האינטרנט הישראלי‬
‫ומשרד ה-‪ W3C‬הישראלי‬
‫611 / 1‬

2. ‫תוכנית...‬
‫מהי נגישות‬ ‫•‬
‫כלים‬ ‫•‬
‫21 הקווים המנחים - 0.2 ‪WCAG‬‬ ‫•‬
‫סיכום‬ ‫•‬
‫611 / 2‬

3. ‫איגוד האינטרנט הישראלי‬
‫שלוחת האיגוד הבינלאומי‬
‫עמותה ללא מטרת רווח‬
‫פועל לקידום האינטרנט והטמעתו בישראל כתשתית‬
‫טכנולוגית, מחקרית, חינוכית, חברתית ועסקית‬
‫611 / 3‬

4. ‫‪W3C‬‬
‫• ארגון בינלאומי‬
‫• כ-053 ארגונים‬
‫• פורום ניטראלי ליצירת תקני הווב‬
‫• משימה:‬
‫להוביל את הרשת למיצוי הפוטנציאל על ידי פיתוח‬
‫פרוטוקולים וקווים מנחים שיאפשרו את צמיחתה‬
‫לטווח ארוך.‬
‫4‬
‫611 / 4‬

5. ‫מהי‬
‫נגישות‬
‫611 / 5‬

6. ‫מוגבלויות המשפיעות על השימוש באינטרנט:‬
‫(קוראי מסך, ברייל)‬ ‫עיוורון‬
‫ראייה לקויה (מגדילי מסך)‬
‫עיוורון צבעים‬
‫שמיעה‬
‫קוגניציה‬
‫מוטוריקה (עזרי ניווט, אי שימוש בעכבר)‬
‫611 / 6‬

7. ‫מהו אתר נגיש?‬
‫אתר המאפשר לאנשים עם מוגבלות לגלוש באותה רמה‬
‫של יעילות והנאה ככל הגולשים.‬
‫611 / 7‬

8. ‫נגישות זה גם....‬
‫(יותר קהל, יותר מצליחים להשתמש)‬ ‫‪ROI‬‬
‫‪( SEO‬פשוט ככה...)‬
‫שימושיות (תת קבוצה)‬
‫‪( Mobile‬יש חפיפה בין צרכי המשתמשים)‬
‫מקצועיות (מרגישים את ההבדל)‬
‫חוק (בקרוב...)‬
‫שוק מתרחב (עלייה בתוחלת החיים)‬
‫611 / 8‬

9. ‫אה כן...‬
‫אנשים‬
‫611 / 9‬

10. ‫על מה אנחנו מדברים?‬
‫611 / 01‬

11. ‫הנחיות להנגשת תכני אתרי אינטרנט 0.2 )‪(WCAG‬‬
‫2‪j.mp/w3av‬‬
‫611 / 11‬

12. ‫4 עקרונות‬
‫‪‬‬
‫21 קווים מנחים‬
‫‪‬‬
‫מדדי הצלחה‬
‫)‪)‬‬
‫שיטות‬
‫‪j.mp/w3ada‬‬
‫611 / 21‬

13. ‫שלוש רמות נגישות – ‪AAA ,AA ,A‬‬
‫611 / 31‬

14. ‫תקן ישראלי‬
‫בהכנה במכון התקנים‬ ‫•‬
‫ביקורת הציבור – 1102‬ ‫•‬
‫מבוסס על 0.2 ‪WCAG‬‬ ‫•‬
‫התאמה לסביבה הישראלית‬ ‫•‬
‫611 / 41‬

15. ‫כלים‬
‫611 / 51‬

16. ‫כלי עזר: מנוע חיפוש לאלמנטים ב-‪HTML, CSS‬‬
‫וגם –‬
‫• נגישות‬
‫• ‪Mobile‬‬
‫• ‪SVG‬‬
‫דוגמא...‬
‫8‪j.mp/w3cmo‬‬
‫611 / 61‬

17. ‫דוגמא – חיפוש ‪title‬‬
‫611 / 71‬

18. nagish.org.il
18 / 116

19. Techniques for WCAG 2.0 (single file)
j.mp/w3il64
19
19 / 116

20. ‫0.2 ‪WCAG‬‬
‫21 הקווים המנחים‬
‫02‬
‫611 / 02‬

21. ‫21 הקווים המנחים‬
‫3. נהירּות‬ ‫1. תפיסה‬
‫1.3 קריאּות‬ ‫1.1 חלופה טקסטואלית‬
‫2.3 תפקוד באופן צפוי‬ ‫2.1 מדיה מבוססת־זמן‬
‫3.1 גמישות‬
‫3.3 עזרה בהזנת קלט‬
‫4.1 הבחנה‬
‫4. יציבות‬ ‫2. תפעול‬
‫1.4 תאימּות‬ ‫1.2 נגישות מהמקלדת‬
‫2.2 משך־זמן מספיק‬
‫3.2 מניעת התקפים אפילפטיים‬
‫4.2 ניווט נוח‬
‫611 / 12‬

22. ‫עקרון 1: נתפס‬
)perceive( ‫ניתן 'לתפוס' מבחינה חושית‬
.‫את תוכן האתר‬
it can't be invisible to all of their senses
22 / 116

23. ‫1.1 חלופה טקסטואלית‬
‫(תיאור תמונה, פקדים בטפסים, חלופה ל-‪) CAPTCHA‬‬
‫05‪j.mp/w3il‬‬
‫611 / 32‬

24. alt-‫נגיש: שימוש ב‬
<img src="newsletter.gif" alt="Free
newsletter. Get free recipes, news, and
more. Learn more." />
)vs title (
j.mp/w3il51 24 / 116

25. ‫לא נגיש: טקסט ‪ alt‬חסר משמעות‬
‫52‬
‫611 / 52‬

26. 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 26 / 116

27. ‫נגיש: טקסט חלופי‬
‫611 / 72‬

28. ‫ראיה‬
‫שמיעה‬
www.google.com/recaptcha
28
28 / 116

29. ‫קישוט, עיצוב, תוכן בלתי־נראה –‬
‫באופן שטכנולוגיה מסייעת יכולה להתעלם ממנו‬
‫92‬
‫611 / 92‬

30. ‫2.1 חלופות עבור מדיה מבוססת-זמן‬
‫(כתוביות לוידאו, או קול, תיאורים כתובים של צלילים‬
‫משמעותיים, תיאורי אודיו למידע חזותי משמעותי)‬
‫611 / 03‬

31. Universal Subtitles :‫נגיש‬
universalsubtitles.org 31 / 116

32. ‫לא נגיש: אין תמלול לפודקסט‬
‫‪bit.ly/f65m7O‬‬ ‫611 / 23‬

33. ‫נגיש: יעוץ משפטי מבוסס וידאו -‬
‫בשפת הסימנים.‬
‫-‪radlegalservices.org.uk/bsl‬‬
‫611 / 33‬

34. ‫3.1 תוכן הניתן להתאמה‬
‫(תגיות נכונות וסמנטיות, הפרדת תוכן מעיצוב, קרבה בין‬
‫אלמנטים קשורים, זיהוי כותרות ורשימות)‬
‫611 / 43‬

35. ‫נגיש: הפרידו תוכן מעיצוב‬
‫אותו אתר,‬
‫ללא ‪CSS‬‬
‫• ‪ HTML‬לתוכן‬
‫דוגמא...‬ ‫• ‪ CSS‬לעיצוב‬
‫• עיצוב ללא טבלאות‬
‫321‪j.mp/dkrg‬‬ ‫611 / 53‬

36. ‫נגיש: דוגמא – שינוי עיצוב‬
standards.co.il csszengarden.com
36 / 116

37. ‫נגיש: אלמנטים סמנטיים‬
‫כותרות - >6‪<h1> – <h‬‬ ‫•‬
‫רשימות ותפריטים - >‪ <ul‬ו >‪<ui‬‬ ‫•‬
‫פסקה - >‪<p‬‬ ‫•‬
‫הדגשה - >‪<strong‬‬ ‫•‬
‫611 / 73‬

38. ‫לא נגיש: שימוש לא נכון בכותרות‬
‫‪lifehacker.com‬‬ ‫611 / 83‬

39. ‫נגיש: שימוש נכון בכותרות‬
weboverhauls.com/dennislembree/ 39 / 116

40. ‫לא נגיש: אין כותרות‬
‫‪Gov.il‬‬ ‫611 / 04‬

41. Failure Example 1: A heading :‫לא נגיש‬
used only for visual effect
<p>Interested in learning more? Write to us at</p>
<h4>3333 Third Avenue, Suite 300 · New York City</h4>
<p>And we'll send you the complete informational packet absolutely
Free!</p>
<h1>Study on the Use of Heading Elements in Web Pages</h1>
<h3>Joe Jones and Mary Smith<h3>
<h4>March 14, 2006</h4>
<h2>Abstract</h2>
<p>A study was conducted in early 2006 …</p>
41 / 116

42. ‫קישורים ברורים ודילוג לתוכן‬
a span.hide {
height: 1px;
width: 1px;
position: absolute;
overflow: hidden;
top: -10px;
}
42 / 116

43. -‫תגיות חדשות לשיפור סמנטיקה ב‬
HTML5
<header>
<section>
<footer>
<nav>
<article>
<aside>
…
43 / 116

44. ‫הדרכה בהבנת תוכן ובהפעלתו לא תסתמך רק על‬
‫המאפיינים החושיים של מרכיבים, כגון צורה, גודל,‬
‫מיקום חזותי, כיוון או צליל.‬
‫44‬
‫611 / 44‬

45. ‫לא נגיש: תגיות – העברת משמעות רק בעיצוב‬
‫בלי‬
‫‪CSS‬‬
‫611 / 54‬

46. ‫המנעו מ:‬
‫"הקטגוריות שבצד ימין ...."‬
‫"לחצו על הכפתור העגול....‬
‫64‬
‫611 / 64‬

47. ‫נגיש: מידע המועבר בצבע בלבד – נמצא גם‬
‫בטקסט ומוסתר בעזרת ‪CSS‬‬
‫‪caniuse.com/datalist‬‬
‫611 / 74‬

48. ‫לא נגיש: אי אפשר לדעת מה מסומן בלי ‪CSS‬‬
‫‪initializr.com‬‬ ‫611 / 84‬

49. ‫4.1 בר הבחנה‬
‫(הפרדת חזית מרקע – אי שימוש בצבע בלבד למשמעות, גודל‬
‫אותיות בר הגדלה, אי שימוש בתמונה כטקסט, ניגודיות)‬
‫611 / 94‬

50. ‫שימוש בצבע‬
‫הדגישו גם באמצעות עיבוי, הוספת מסגרת, 1שינוי רקע‬
‫8‪j.mp/w3ad‬‬
‫611 / 05‬

51. ‫לא נגיש: שימוש בצבע בלבד להבעת משמעות‬
‫‪kavhutz.wordpress.com‬‬ ‫611 / 15‬

52. ‫ניגוד-צבעים‬
‫יחס-ניגוד של לפחות 1:5.4‬
‫כי קשה לקרוא כאשר אין מספיק‬
‫ניגודיות‬
‫)השתמשו בבודק ניגודיות: 9‪(j.mp/cont123 ,j.mp/w3ad‬‬
‫611 / 25‬

53. ‫לא נגיש: ניגודיות נמוכה בכותרת‬
‫‪bit.ly/h26CQh‬‬ ‫611 / 35‬

54. ‫נגיש: כפתור לשינוי הניגודיות באתר‬
‫‪nptech.org.il‬‬ ‫611 / 45‬

55. ‫נגיש: כפתורים לשינוי הניגודיות וגודל‬
‫הטקסט‬
‫‪j.mp/accessbb‬‬ ‫611 / 55‬

56. ‫נגיש: אפשרות להגדלת הטקסט‬
‫‪guardian.co.uk‬‬ ‫611 / 65‬

57. Or Just fluied :‫נגיש‬
57 / 116

58. ‫שליטה בשמע: אם יש מוסיקה אוטומטי (ליותר מ-3‬
‫שניות) – ניתן להפסיק /להחליש‬
‫דוגמא:‬
‫611 / 85‬

59. ‫לא מצאתי‬
‫611 / 95‬

60. ‫עקרון 2: ניתן להפעלה‬
.‫המרכיבים והניווט ניתנים להפעלה‬
the interface cannot require
interaction that a user cannot perform
60 / 116

61. ‫1.2 תפקוד מלא ממקלדת‬
‫(הגעה לכל הניווט, אין מלכודות מקלדת)‬
‫611 / 16‬

62. ‫לא נגיש: במעבר מקלדת – אי אפשר‬
‫לראות איפה הפוקוס‬
‫‪businessinsider.com‬‬ ‫611 / 26‬

63. ‫נגיש: פוקוס נראה לעין‬
accessibletwitter.com 63 / 116

64. event handlers-‫השתמשו ב‬
‫מקבילים‬
j.mp/w3il54
64 / 116

65. ‫לא נגיש: אין תמיכה מלאה במקלדת‬
‫בתפריט עליון‬
‫‪whitehouse.gov‬‬ ‫611 / 56‬

66. ‫לא נגיש: הסתמכות על ‪ :hover‬בלבד‬
‫+ ניגודיות נמוכה‬
‫‪helppassiton.co.uk‬‬
‫611 / 66‬

67. ‫נגיש: גישה לניווט באמצעות המקלדת‬
‫‪nagish.org.il‬‬ ‫611 / 76‬

68. ‫נגיש: ספקו חלופה לגרירה‬
‫מצב נגישות בוורדפרס‬
‫55‪j.mp/w3il‬‬ ‫611 / 86‬

69. moseover ‫לא נגיש: פועל רק עם‬
j.mp/isl12 69 / 116

70. ‫לא נגיש: מלכודת מקלדת‬
‫‪j.mp/werjtfs‬‬
‫611 / 07‬

71. ‫נגיש: מקשי קיצור בפייסבוק‬
‫611 / 17‬

72. ‫2.2 מספיק זמן‬
‫(הזהרה מפני סיום ‪ ,session‬אפשרות הארכה, עצירת תנועה‬
‫ואיתחולה, עצירת עדכונים, אי הקצבת זמן לפעולה (אם אפשר) )‬
‫611 / 27‬

73. ‫נגיש: שליטה בעדכון אוטומטי‬
‫‪downrightnow.com‬‬ ‫611 / 37‬

74. ‫שמירת מידע בטופס בכדי אם נדרש אימות המשתמש‬
‫(‪ )authentication‬לפני הגשתו‬
‫611 / 47‬

75. ‫הארכת ה-‪ session‬בשירותים מקוונים של‬
‫הבנק‬
‫611 / 57‬

76. ‫3.2 מניעת התקפים‬
‫(עצירת תזוזה, מנעת הבהובים וחלקים זזים)‬
‫611 / 67‬

77. ‫- לא יותר מ-3 הבהובים בשניה (או שאינו עובר את הסף)‬
‫- איזורים מהבהבים - קטנים‬
‫611 / 77‬

78. ‫נגיש: סמל מהבהב – מעט ולא בולט‬
‫‪gov.il‬‬ ‫611 / 87‬

79. ‫לא נגיש: הרבה תנועה, צבעוני, גדול‬
it.themarker.com/tmit/article/13885
79 / 116

80. ‫נגיש: כפתור עצירת תנועה‬
‫‪www.leumi.co.il‬‬ ‫611 / 08‬

81. ‫נגיש: כפתור עצירת תנועה‬
‫‪nagish.org.il‬‬ ‫611 / 18‬

82. ‫4.2 קלות ניווט ומציאת מידע‬
‫(מספר דרכים לאותו תוכן, דפים מובנים עם כותרות נכונות,‬
‫קישורים ברורים, עקיפת בלוקים החוזרים על עצמם, סדר פוקוס‬
‫נכון)‬
‫611 / 28‬

83. ‫נגיש: קישור ישיר לתוכן (גלוי או‬
‫מוסתר)‬
‫‪nagish.org.il‬‬ ‫611 / 38‬

84. ‫נגיש: השתמשו בפירורי לחם‬
‫‪education.gov.il‬‬ ‫611 / 48‬

85. ‫נגיש:‬
‫מפת אתר‬
‫(מבוסס על סיפור אמיתי)‬
‫‪coi.gov.uk‬‬ ‫611 / 58‬

86. ‫טקסט בעל משמעות בקישורים‬
‫‪ X‬לקריאת התוכנית המלאה לחץ כאן‬
‫קראו את התוכנית המלאה‬ ‫‪V‬‬
‫611 / 68‬

87. ‫נגיש: כותרות ברורות....‬
‫‪vs‬‬
‫‪j.mp/ackdi‬‬ ‫611 / 78‬

88. ‫עקרון 3: ניתן להבנה‬
‫הטקסט ניתן לקראה ולהבנה‬
the content or operation cannot be
beyond their understanding
88 / 116

89. ‫1.3 טקסט בר הבנה‬
‫(רמת הטקסט, זיהוי השפה בדף כולו ובחלקיו, פירוש קיצורים‬
‫וז'רגון)‬
‫611 / 98‬

90. ‫נגיש: זיהוי שפת הטקסט‬
<html lang="fr">
<html xml:lang="he”>
90 / 116

91. ‫(למעט טקסט משפטי)‬
‫611 / 19‬

92. ‫נגיש: הרחבת קיצורים‬
<p>Tasini <abbr title="and
others">et al.</abbr> <abbr
title="versus">v.</abbr> The New
York Times
92 / 116

93. ‫2.3 תפעול ותצוגה צפויים‬
‫(אי שינוי ההקשר בפוקוס או בלי שהמשתמש ביקש, ניווט עקבי)‬
‫611 / 39‬

94. ‫נגיש: לא לשנות את העמוד באופן משמעותי‬
‫בגלל פוקוס על אלמנט‬
‫‪w3c.org‬‬ ‫611 / 49‬

95. ‫לא נגיש: איבוד פוקוס בניווט מקלדת‬
‫‪ustream.tv‬‬
‫611 / 59‬

96. ‫3.3 תמיכה בהזנה‬
‫הסבר מדויק לטעיות, הסבר על מה צריך להזין, ולידציה, טקסט‬
‫עזרה)‬
‫(בנייה חכמה של טפסים)‬
‫611 / 69‬

97. ‫דרכי מניעת טעויות בטפסים‬
‫• הפיכּות - ניתן לבטל הפעולה‬
‫• אישור - תצוגה מקדימה‬
‫• בדיקה – בדיקת הערכים שהוזנו‬
‫611 / 79‬

98. ‫נגיש: טופס בנוי היטב‬
‫שגיאות מוצגות כקישורים בראש הטופס‬ ‫•‬
‫מוסבר מה הטעות באופן מדויק‬ ‫•‬
‫<”‪>label for=“x‬‬ ‫•‬
‫אין ‪...CAPTCH‬‬ ‫•‬
‫(חסר: ולידציה לאימייל!!)‬ ‫•‬
‫‪webaim.org/contact‬‬
‫611 / 89‬

99. :‫נגיש‬
www.data.gov.uk/user/regist 99 / 116

100. ‫נגיש: זיהוי שגיאות והצגתן בראש הטופס‬
‫/‪farukat.es/contact‬‬
‫611 / 001‬

101. ‫נגיש: עזרה בעת זיהוי טעות בטופס‬
‫הצעת תיקון אפשרי‬
‫‪los.direct.gov.uk‬‬ ‫611 / 101‬

102. ‫עזרה‬
‫- קישור לטקסט עזרה‬
‫- הצגת דוגמאות לערכים נכונים‬
‫611 / 201‬

103. ‫עקרון 4 - יציבות‬
‫תאימות מרבית עם דפדפנים, תוכנות וכדומה‬
as technologies and user agents evolve,
the content should remain accessible
103 / 116

104. ‫1.4 ‪Parsing‬‬
‫(תג פתיחה וסגירה, קינון נכון, אי כפילות ‪IDs are ,attributes‬‬
‫‪)unique‬‬
‫לכתוב קוד תקין‬
‫611 / 401‬

105. ‫בדקו את תקינות ה-‪ HTML‬וה-‪CSS‬‬
‫• בודק תקינות ‪validator.w3.org - HTML‬‬
‫• בודק תקינות ‪j.mp/w3add1 - CSS‬‬
‫611 / 501‬

106. ‫2.4 שם-תפקיד-ערך‬
‫(שימוש בפקדים רגילים פותר את זה)‬
‫611 / 601‬

107. :‫לדוגמה‬
"‫• שם: "קראתי את תנאי השימוש‬
checkbox :‫• תפקיד‬
."‫• ערך: "מסומן‬
<input type="checkbox" id="markuplang"
name="computerskills" checked="checked“ />
<label for="markuplang"> ‫קראתי את תנאי השימוש‬
</label>
107 / 116

108. Accessibility API -‫אודות ה‬
‫של המערכת‬
used to communicate accessibility information
about user interfaces to assistive technologies.
Java accessiblity - j.mp/w3il59
Flash accessibility - j.mp/w3il60
j.mp/aceess
108 / 116

109. Using the title attribute of the frame
and iframe elements
109 / 116

110. WAI-ARIA…
110 / 116

111. ‫ בעזרת‬checkbox ‫לא נגיש: יצירת‬
‫ ו-תמונה‬span
)WAI-ARIA ‫(ניתן להנגיש בעזרת‬
<p> <span onclick="toggleCheckbox('chkbox')">
<img src="unchecked.gif" id="chkbox" alt="">
Include Signature </span> </p>
j.mp/sdgtwq 111 / 116

112. ‫לסיכום‬
‫211‬
‫611 / 211‬

113. ‫אתרים יפים... ונגישים‬
accessibleculture.org nomensa.com copious.co.uk
113 / 116

114. ‫עזרה‬
accessifyforum.com
114 / 116

115. ‫איך מתחילים‬
‫1. קראו את 0.2 ‪( WCAG‬בעברית)‬
‫2. שימרו את הכלים מהמצגת – קרובים‬
‫(3. הרשמו למקורות מידע)‬
‫4. בזמן התכנון והפיתוח – היו בקרותיים וחישבו על‬
‫נגישות‬
‫611 / 511‬

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