אתרי אינטרנט – נגישות, התאמה למכשירים ניידים ופלטפורמות
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
2,467
On Slideshare
1,558
From Embeds
909
Number of Embeds
14

Actions

Shares
Downloads
2
Comments
0
Likes
0

Embeds 909

http://www.isoc.org.il 692
http://eyalsela.blogspot.com 55
http://isoc.org.il 49
http://www.w3c.org.il 38
http://eyalsela.blogspot.ru 26
http://eyalsela.blogspot.co.il 25
http://www2.isoc.org.il 10
url_unknown 6
http://drpodyssey.isoc.org.il 2
http://eyalsela.blogspot.gr 2
https://www.w3c.org.il 1
http://www.copyscape.com 1
http://www.directrss.co.il 1
http://www.google.co.il 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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 userprojection 2007-2015j.mp/dsafaa Source: thenextweb.com 6 6 / 116
  • 7. Smartphone market share - Q1 2010(Q1 ’10:23% of mobileconsumershave asmartphone)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 cant 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/recaptcha35 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 requireinteraction that a user cannotperform 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 bebeyond 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 agentsevolve, the content should remainaccessible 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