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

2. ‫תוכנית...‬
‫• מכשירים ניידים‬
‫• פלטפורמות‬
‫ודפדפנים‬
‫• נגישות‬
‫• טיפים לאתר איכותי‬
‫611 / 2‬

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

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

5. ‫מכשירים ניידים‬
‫611 / 5‬

6. Mobile vs deskop internt user
projection 2007-2015
j.mp/dsafaa Source: thenextweb.com 6
6 / 116

7. Smartphone market share - Q1 2010
(Q1 ’10:
23% of mobile
consumers
have a
smartphone)
bit.ly/h755vK 7
7 / 116

8. ‫גרסה לניידים של האתר‬
‫-מבקרים ממכשירים ניידים מופנים אוטמטית לגרסה‬
‫המתאימה למכשירים ניידים‬
‫)או אפליקציה? – שיקולים...(‬
‫611 / 8‬

9. ‫מגבלות והבדלים – מכשירים ניידים לעומת שולחניים‬
‫• תצוגה‬
‫• הזנת תוכן‬
‫• רוחב פס ועלות‬
‫• מטרות המשתמש‬
‫• מגבלות המכשיר‬
‫‪bit.ly/w3cmbp‬‬
‫9‬

10. ‫דוגמא – גרסה רגילה לעומת לניידים‬
‫'‪'law.co.il‬‬
‫‪law.co.il‬‬
‫611 / 01‬

11. ‫דוגמא – גרסה רגילה לעומת לניידים‬
‫'חורים ברשת'‬
‫‪holesinthenet.co.il‬‬
‫611 / 11‬

12. ‫כנס שנתי‬
isoc.org.il/conf2011/mobile
12
12 / 116

13. ‫זול - יקר?‬
‫תלוי בפלטפורמה ובמורכבות האתר.‬
‫)בוורדפרס למשל מדובר בתוסף בלבד(‬
‫611 / 31‬

14. ‫כדאי?‬
‫תלוי....‬
‫כמות הקהל‬
‫סוג העסק/שירות‬
‫עד כמה יועיל?‬
‫הסתכלות לשנים הקרובות‬
‫611 / 41‬

15. ‫פלטפורמות‬
‫ודפדפנים‬
‫611 / 51‬

16. ‫התאמת האתר‬
‫לדפדפנים שונים‬
‫611 / 61‬

17. ‫באילו דפדפנים משתמשים בישראל?‬
‫מקור הנתונים‪: http://getclicky.com‬‬ ‫611 / 71‬

18. ‫פלטפורמות חופשיות לבניית אתרים‬
‫- וורדפרס‬
‫- דרופל‬
‫- ג'ומלה‬
‫- ...‬
‫שיקולים...‬
‫- עלות‬
‫- נעילה‬
‫- התאמה‬
‫611 / 81‬

19. ‫נגישות‬
‫611 / 91‬

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

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

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

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

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

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

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

27. ‫שלוש רמות נגישות ‪A, AA, AAA‬‬
‫611 / 72‬

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

72. ‫נגיש:‬
‫מפת אתר‬
‫‪coi.gov.uk‬‬
‫611 / 27‬

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

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

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

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

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

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

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

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

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

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

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

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

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

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

87. ‫‪.1 Parsing‬‬
‫כתוב קוד תקין‬
‫611 / 78‬

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

89. WAI-ARIA…
89 / 116

90. ‫לסיכום‬
‫09‬
‫611 / 09‬

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

92. ‫טיפים לאתר איכותי‬
‫(כמובן שזה תלוי בהיקף, תקציב וצורך. ייתכן ואתר קטן ופשוט יספיק!)‬
‫יועץ‬ ‫•‬
‫אפיון מפורט‬ ‫•‬
‫לוודא שהמבצע בקיא ב:‬ ‫•‬
‫• נגישות‬
‫• כתיבת קוד איכותי ותקני‬
‫• שימושיות‬
‫עיצוב יפה ,אמין‬ ‫•‬
‫משוב –מהסביבה ,ממשתמשים‬ ‫•‬
‫כמובן -תוכן.‬ ‫•‬
‫611 / 29‬

93. !‫צרו קשר‬
‫אייל סלע‬
eyal@isoc.org.il
@isociltech @eyalsela
: ‫המצגת‬
93 / 116