Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

אתרי אינטרנט – נגישות, התאמה למכשירים ניידים ופלטפורמות

2,510 views

Published on

  • Be the first to comment

  • Be the first to like this

אתרי אינטרנט – נגישות, התאמה למכשירים ניידים ופלטפורמות

  1. 1. ‫1102/4/82‬ ‫אתרי אינטרנט – נגישות, התאמה‬ ‫למכשירים ניידים ופלטפורמות.‬ ‫אייל סלע‬ ‫מנהל פרויקטים, איגוד האינטרנט הישראלי‬ ‫ומשרד ה ‪-W3C‬הישראלי‬ ‫611 / 1‬
  2. 2. ‫תוכנית...‬ ‫• מכשירים ניידים‬ ‫• פלטפורמות‬ ‫ודפדפנים‬ ‫• נגישות‬‫• טיפים לאתר איכותי‬ ‫611 / 2‬
  3. 3. ‫הישראלי האינטרנט איגוד‬ ‫שלוחת האיגוד הבינלאומי‬ ‫עמותה ללא מטרת רווח‬‫פועל לקידום האינטרנט והטמעתו בישראל כתשתית‬ ‫טכנולוגית, מחקרית, חינוכית, חברתית ועסקית‬ ‫611 / 3‬
  4. 4. ‫‪W3C‬‬ ‫• ארגון בינלאומי‬ ‫• כ-053 ארגונים‬ ‫• פורום ניטראלי ליצירת תקני הווב‬ ‫• משימה:‬ ‫להוביל את הרשת למיצוי הפוטנציאל על ידי פיתוח‬‫פרוטוקולים וקווים מנחים שיאפשרו את צמיחתה לטווח‬ ‫ארוך.‬ ‫4‬ ‫611 / 4‬
  5. 5. ‫מכשירים ניידים‬ ‫611 / 5‬
  6. 6. Mobile vs deskop internt userprojection 2007-2015j.mp/dsafaa Source: thenextweb.com 6 6 / 116
  7. 7. Smartphone market share - Q1 2010(Q1 ’10:23% of mobileconsumershave asmartphone)bit.ly/h755vK 7 7 / 116
  8. 8. ‫גרסה לניידים של האתר‬‫-מבקרים ממכשירים ניידים מופנים אוטמטית לגרסה‬ ‫המתאימה למכשירים ניידים‬ ‫)או אפליקציה? – שיקולים...(‬ ‫611 / 8‬
  9. 9. ‫מגבלות והבדלים – מכשירים ניידים לעומת שולחניים‬ ‫• תצוגה‬ ‫• הזנת תוכן‬ ‫• רוחב פס ועלות‬ ‫• מטרות המשתמש‬ ‫• מגבלות המכשיר‬‫‪bit.ly/w3cmbp‬‬ ‫9‬
  10. 10. ‫דוגמא – גרסה רגילה לעומת לניידים‬ ‫‪law.co.il‬‬‫‪law.co.il‬‬ ‫611 / 01‬
  11. 11. ‫דוגמא – גרסה רגילה לעומת לניידים‬ ‫חורים ברשת‬‫‪holesinthenet.co.il‬‬ ‫611 / 11‬
  12. 12. ‫כנס שנתי‬isoc.org.il/conf2011/mobile 12 12 / 116
  13. 13. ‫זול - יקר?‬‫תלוי בפלטפורמה ובמורכבות האתר.‬ ‫)בוורדפרס למשל מדובר בתוסף בלבד(‬ ‫611 / 31‬
  14. 14. ‫כדאי?‬ ‫תלוי....‬ ‫כמות הקהל‬ ‫סוג העסק/שירות‬ ‫עד כמה יועיל?‬‫הסתכלות לשנים הקרובות‬ ‫611 / 41‬
  15. 15. ‫פלטפורמות‬ ‫ודפדפנים‬ ‫611 / 51‬
  16. 16. ‫התאמת האתר‬‫לדפדפנים שונים‬ ‫611 / 61‬
  17. 17. ‫באילו דפדפנים משתמשים בישראל?‬‫מקור הנתונים‪: http://getclicky.com‬‬ ‫611 / 71‬
  18. 18. ‫פלטפורמות חופשיות לבניית אתרים‬ ‫- וורדפרס‬ ‫- דרופל‬ ‫- גומלה‬ ‫- ...‬ ‫שיקולים...‬ ‫- עלות‬ ‫- נעילה‬ ‫- התאמה‬ ‫611 / 81‬
  19. 19. ‫נגישות‬ ‫611 / 91‬
  20. 20. ‫מוגבלויות המשפיעות על השימוש‬ ‫באינטרנט:‬ ‫(קוראי מסך, ברייל)‬ ‫עיוורון‬ ‫ראייה לקויה (מגדילי מסך)‬ ‫עיוורון צבעים‬ ‫שמיעה‬ ‫קוגניציה‬ ‫מוטוריקה (עזרי ניווט, אי שימוש בעכבר)‬ ‫611 / 02‬
  21. 21. ‫מהו אתר נגיש?‬‫אתר המאפשר לאנשים עם מוגבלות לגלוש באותה‬ ‫רמה של יעילות והנאה ככל הגולשים.‬ ‫611 / 12‬
  22. 22. ‫נגישות זה גם....‬ ‫‪( ROI‬יותר קהל, יותר מצליחים להשתמש)‬ ‫‪( SEO‬פשוט ככה)‬ ‫שימושיות (תת קבוצה)‬‫‪( Mobile‬יש חפיפה בין צרכי המשתמשים)‬ ‫מקצועיות (מרגישים את ההבדל)‬ ‫חוק (בקרוב...)‬ ‫שוק מתרחב (עלייה בתוחלת החיים)‬ ‫611 / 22‬
  23. 23. ‫אה כן...‬‫אנשים‬ ‫611 / 32‬
  24. 24. ‫על מה אנחנו מדברים?‬ ‫611 / 42‬
  25. 25. ‫הנחיות להנגשת תכני אתרי אינטרנט)0.2 ‪(WCAG‬‬‫2‪j.mp/w3av‬‬ ‫611 / 52‬
  26. 26. ‫4עקרונות‬ ‫‪‬‬ ‫21קווים מנחים‬ ‫‪‬‬ ‫מדדי הצלחה‬ ‫)‪)‬‬ ‫שיטות‬‫‪j.mp/w3ada‬‬ ‫611 / 62‬
  27. 27. ‫שלוש רמות נגישות ‪A, AA, AAA‬‬ ‫611 / 72‬
  28. 28. ‫תקן ישראלי‬ ‫בהכנה במכון התקנים‬ ‫•‬ ‫ביקורת הציבור – 1102‬ ‫•‬ ‫מבוסס על0.2 ‪WCAG‬‬ ‫•‬‫התאמה לסביבה הישראלית‬ ‫•‬ ‫611 / 82‬
  29. 29. ‫0.2 ‪WCAG‬‬‫21הקווים המנחים‬‫92‬ ‫611 / 92‬
  30. 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. 31. ‫עקרון 1: נתפס‬ ‫ניתן לתפוס מבחינה חושית‬ .‫(את תוכן האתר‬perceive)it cant be invisible to all of their senses 31 / 116
  32. 32. ‫1.חלופה טקסטואלית‬ ‫(תיאור תמונה, פקדים בטפסים, חלופה ל‪(CAPTCHA‬‬‫05‪j.mp/w3il‬‬ ‫611 / 23‬
  33. 33. ‫לא נגיש: טקסט ‪ alt‬חסר משמעות‬ ‫33‬ ‫611 / 33‬
  34. 34. ‫נגיש: טקסט חלופי‬ ‫611 / 43‬
  35. 35. ‫ראיה‬ ‫שמיעה‬www.google.com/recaptcha35 35 / 116
  36. 36. ‫קישוט, עיצוב, תוכן בלתי־נראה–‬ ‫באופן שטכנולוגיה מסייעת יכולה להתעלם ממנו‬‫63‬ ‫611 / 63‬
  37. 37. ‫2.חלופות עבור מדיה מבוססת-זמן‬‫(כתוביות לוידאו, או קול, תיאורים כתובים של צלילים‬ ‫משמעותיים, תיאורי אודיו למידע חזותי משמעותי)‬ ‫611 / 73‬
  38. 38. : Universal Subtitles ‫נגיש‬universalsubtitles.org 38 / 116
  39. 39. ‫לא נגיש: אין תמלול לפודקסט‬‫‪bit.ly/f65m7O‬‬ ‫611 / 93‬
  40. 40. ‫3.תוכן הניתן להתאמה‬‫(תגיות נכונות וסמנטיות, הפרדת תוכן מעיצוב, קרבה בין‬ ‫אלמנטים קשורים, זיהוי כותרות ורשימות)‬ ‫611 / 04‬
  41. 41. ‫נגיש: דוגמא – שינוי עיצוב‬standards.co.il csszengarden.com 41 / 116
  42. 42. ‫הדרכה בהבנת תוכן ובהפעלתו לא תסתמך רק על‬ ‫המאפיינים החושיים של מרכיבים, כגון צורה,‬ ‫גודל, מיקום חזותי, כיוון או צליל.‬‫24‬ ‫611 / 24‬
  43. 43. ‫המנעו מ:‬ ‫"הקטגוריות שבצד ימין"....‬ ‫"לחצו על הכפתור העגול ....‬‫34‬ ‫611 / 34‬
  44. 44. ‫4.בר הבחנה‬‫(הפרדת חזית מרקע – אי שימוש בצבע בלבד למשמעות,‬ ‫גודל אותיות בר הגדלה, אי שימוש בתמונה כטקסט,‬ ‫ניגודיות)‬ ‫611 / 44‬
  45. 45. ‫שימוש בצבע‬‫הדגישו גם באמצעות עיבוי, הוספת מסגרת שינוי רקע‬ ‫1,‬‫8‪j.mp/w3ad‬‬ ‫611 / 54‬
  46. 46. ‫לא נגיש: שימוש בצבע בלבד להבעת משמעות‬‫‪kavhutz.wordpress.com‬‬ ‫611 / 64‬
  47. 47. ‫ניגוד-צבעים‬ ‫יחס-ניגוד של לפחות 1:5.4‬ ‫כי קשה לקרוא כאשר אין מספיק‬ ‫ניגודיות‬‫) :השתמשו בבודק ניגודיות 9‪(j.mp/cont123, j.mp/w3ad‬‬ ‫611 / 74‬
  48. 48. ‫לא נגיש: ניגודיות נמוכה בכותרת‬‫‪bit.ly/h26CQh‬‬ ‫611 / 84‬
  49. 49. ‫נגיש: כפתור לשינוי הניגודיות באתר‬‫‪nptech.org.il‬‬ ‫611 / 94‬
  50. 50. ‫נגיש: כפתורים לשינוי הניגודיות וגודל‬ ‫הטקסט‬‫‪j.mp/accessbb‬‬ ‫611 / 05‬
  51. 51. ‫נגיש: אפשרות להגדלת הטקסט‬‫‪guardian.co.uk‬‬ ‫611 / 15‬
  52. 52. ‫שליטה בשמע: אם יש מוסיקה אוטומטי (ליותר מ-3‬ ‫שניות) – ניתן להפסיק /להחליש‬ ‫611 / 25‬
  53. 53. ‫עקרון 2: ניתן להפעלה‬ .‫המרכיבים והניווט ניתנים להפעלה‬the interface cannot requireinteraction that a user cannotperform 53 / 116
  54. 54. ‫1.2תפקוד מלא ממקלדת‬ ‫(הגעה לכל הניווט, אין מלכודות מקלדת)‬ ‫611 / 45‬
  55. 55. ‫לא נגיש: במעבר מקלדת – אי אפשר‬ ‫לראות איפה הפוקוס‬‫‪businessinsider.com‬‬ ‫611 / 55‬
  56. 56. ‫נגיש: פוקוס נראה לעין‬accessibletwitter.com 56 / 116
  57. 57. ‫לא נגיש: אין תמיכה מלאה במקלדת‬ ‫בתפריט עליון‬‫‪whitehouse.gov‬‬ ‫611 / 75‬
  58. 58. ‫נגיש: גישה לניווט באמצעות המקלדת‬‫‪nagish.org.il‬‬ ‫611 / 85‬
  59. 59. ‫2.2מספיק זמן‬ ‫(הזהרה מפני סיום ,‪ session‬אפשרות הארכה, עצירת תנועה‬‫ואיתחולה, עצירת עדכונים, אי הקצבת זמן לפעולה (אם אפשר(‬ ‫611 / 95‬
  60. 60. ‫נגיש: שליטה בעדכון אוטומטי‬‫‪downrightnow.com‬‬ ‫611 / 06‬
  61. 61. ‫שמירת מידע בטופס בכדי אם נדרש אימות המשתמש‬ ‫)‪(authentication‬לפני הגשתו‬ ‫611 / 16‬
  62. 62. ‫הארכת ה ‪-session‬בשירותים מקוונים של‬ ‫הבנק‬ ‫611 / 26‬
  63. 63. ‫3.2מניעת התקפים‬‫(עצירת תזוזה, מנעת הבהובים וחלקים זזים)‬ ‫611 / 36‬
  64. 64. ‫- לא יותר מ-3 הבהובים בשניה (או שאינו עובר את‬ ‫הסף)‬ ‫- איזורים מהבהבים - קטנים‬ ‫611 / 46‬
  65. 65. ‫נגיש: סמל מהבהב – מעט ולא בולט‬‫‪gov.il‬‬ ‫611 / 56‬
  66. 66. ‫לא נגיש: הרבה תנועה, צבעוני, גדול‬it.themarker.com/tmit/article/13885 66 / 116
  67. 67. ‫נגיש: כפתור עצירת תנועה‬‫‪www.leumi.co.il‬‬ ‫611 / 76‬
  68. 68. ‫נגיש: כפתור עצירת תנועה‬‫‪nagish.org.il‬‬ ‫611 / 86‬
  69. 69. ‫4.2 קלות ניווט ומציאת מידע‬‫(מספר דרכים לאותו תוכן, דפים מובנים עם כותרות נכונות,‬ ‫קישורים ברורים, עקיפת בלוקים החוזרים על עצמם, סדר‬ ‫פוקוס נכון)‬ ‫611 / 96‬
  70. 70. ‫נגיש: קישור ישיר לתוכן (גלוי או מוסתר)‬‫‪nagish.org.il‬‬ ‫611 / 07‬
  71. 71. ‫נגיש: השתמשו בפירורי לחם‬‫‪education.gov.il‬‬ ‫611 / 17‬
  72. 72. ‫נגיש:‬ ‫מפת אתר‬‫‪coi.gov.uk‬‬ ‫611 / 27‬
  73. 73. ‫טקסט בעל משמעות בקישורים‬‫‪ X‬לקריאת התוכנית המלאה לחץ‬ ‫כאן‬ ‫קראו את התוכנית המלאה‬ ‫‪V‬‬ ‫611 / 37‬
  74. 74. ‫נגיש: כותרות ברורות....‬ ‫‪vs‬‬‫‪j.mp/ackdi‬‬ ‫611 / 47‬
  75. 75. ‫עקרון 3: ניתן להבנה‬ ‫הטקסט ניתן לקראה ולהבנה‬the content or operation cannot bebeyond their understanding 75 / 116
  76. 76. ‫1.3 טקסט בר הבנה‬‫(רמת הטקסט, זיהוי השפה בדף כולו ובחלקיו, פירוש קיצורים‬ ‫וזרגון)‬ ‫611 / 67‬
  77. 77. ‫(למעט טקסט משפטי)‬ ‫611 / 77‬
  78. 78. ‫2.תפעול ותצוגה צפויים‬‫(אי שינוי ההקשר בפוקוס או בלי שהמשתמש ביקש, ניווט‬ ‫עקבי)‬ ‫611 / 87‬
  79. 79. ‫לא נגיש: איבוד פוקוס בניווט מקלדת‬‫‪ustream.tv‬‬ ‫611 / 97‬
  80. 80. ‫3.תמיכה בהזנה‬‫(הסבר מדויק לטעיות, הסבר על מה צריך להזין, ולידציה,‬ ‫טקסט עזרה)‬ ‫בנייה חכמה של טפסים‬ ‫611 / 08‬
  81. 81. ‫דרכי מניעת טעויות בטפסים‬‫• הפיכּות - ניתן לבטל הפעולה‬ ‫• אישור - תצוגה מקדימה‬ ‫• בדיקה – בדיקת הערכים שהוזנו‬ ‫611 / 18‬
  82. 82. :‫נגיש‬www.data.gov.uk/user/regist 82 / 116
  83. 83. ‫נגיש: זיהוי שגיאות והצגתן בראש הטופס‬‫/‪farukat.es/contact‬‬ ‫611 / 38‬
  84. 84. ‫נגיש: עזרה בעת זיהוי טעות בטופס‬ ‫הצעת תיקון אפשרי‬‫‪los.direct.gov.uk‬‬ ‫611 / 48‬
  85. 85. ‫עזרה‬ ‫- קישור לטקסט עזרה‬‫- הצגת דוגמאות לערכים נכונים‬ ‫611 / 58‬
  86. 86. ‫עקרון 4 - יציבות‬ ‫תאימות מרבית עם דפדפנים, תוכנות וכדומה‬as technologies and user agentsevolve, the content should remainaccessible 86 / 116
  87. 87. ‫‪.1 Parsing‬‬‫כתוב קוד תקין‬ ‫611 / 78‬
  88. 88. ‫בדקו את תקינות ה ‪-HTML‬וה‪-CSS‬‬ ‫• בודק תקינות‪HTML - validator.w3.org‬‬ ‫• בודק תקינות‪j.mp/w3add1 - CSS‬‬ ‫611 / 88‬
  89. 89. WAI-ARIA… 89 / 116
  90. 90. ‫לסיכום‬‫09‬ ‫611 / 09‬
  91. 91. ‫אתרים יפים... ונגישים‬accessibleculture.org nomensa.com copious.co.uk 91 / 116
  92. 92. ‫טיפים לאתר איכותי‬‫(כמובן שזה תלוי בהיקף, תקציב וצורך. ייתכן ואתר קטן ופשוט יספיק!)‬ ‫יועץ‬ ‫•‬ ‫אפיון מפורט‬ ‫•‬ ‫לוודא שהמבצע בקיא ב:‬ ‫•‬ ‫• נגישות‬ ‫• כתיבת קוד איכותי ותקני‬ ‫• שימושיות‬ ‫עיצוב יפה ,אמין‬ ‫•‬ ‫משוב –מהסביבה ,ממשתמשים‬ ‫•‬ ‫כמובן -תוכן.‬ ‫•‬ ‫611 / 29‬
  93. 93. !‫צרו קשר‬ ‫אייל סלע‬ eyal@isoc.org.il@isociltech @eyalsela : ‫המצגת‬ 93 / 116

×