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

Like this? Share it with your network

Share

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

on

  • 2,441 views

 

Statistics

Views

Total Views
2,441
Views on SlideShare
1,533
Embed Views
908

Actions

Likes
0
Downloads
2
Comments
0

14 Embeds 908

http://www.isoc.org.il 691
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
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

אתרי אינטרנט – נגישות, התאמה למכשירים ניידים ופלטפורמות Presentation 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