‫1102/4/82‬        ‫אתרי אינטרנט – נגישות, התאמה‬          ‫למכשירים ניידים ופלטפורמות.‬                 ‫אייל סלע‬   ‫מנה...
‫תוכנית...‬    ‫• מכשירים ניידים‬        ‫• פלטפורמות‬          ‫ודפדפנים‬             ‫• נגישות‬‫• טיפים לאתר איכותי‬    ...
‫הישראלי האינטרנט איגוד‬                     ‫שלוחת האיגוד הבינלאומי‬                       ‫עמותה ללא מטרת רווח‬‫פועל לקי...
‫‪W3C‬‬                                  ‫• ארגון בינלאומי‬                                  ‫• כ-053 ארגונים‬            ...
‫מכשירים ניידים‬             ‫611 / 5‬
Mobile vs deskop internt userprojection 2007-2015j.mp/dsafaa          Source: thenextweb.com   6                          ...
Smartphone market share - Q1 2010(Q1 ’10:23% of mobileconsumershave asmartphone)bit.ly/h755vK                         7   ...
‫גרסה לניידים של האתר‬‫-מבקרים ממכשירים ניידים מופנים אוטמטית לגרסה‬                    ‫המתאימה למכשירים ניידים‬         ...
‫מגבלות והבדלים – מכשירים ניידים לעומת שולחניים‬                                    ‫• תצוגה‬                             ...
‫דוגמא – גרסה רגילה לעומת לניידים‬               ‫‪law.co.il‬‬‫‪law.co.il‬‬                                ‫611 / 01‬
‫דוגמא – גרסה רגילה לעומת לניידים‬             ‫חורים ברשת‬‫‪holesinthenet.co.il‬‬                                ‫611 / 11‬
‫כנס שנתי‬isoc.org.il/conf2011/mobile                                   12                              12 / 116
‫זול - יקר?‬‫תלוי בפלטפורמה ובמורכבות האתר.‬   ‫)בוורדפרס למשל מדובר בתוסף בלבד(‬                             ‫611 / 31‬
‫כדאי?‬                  ‫תלוי....‬             ‫כמות הקהל‬        ‫סוג העסק/שירות‬          ‫עד כמה יועיל?‬‫הסתכלות לשנים...
‫פלטפורמות‬ ‫ודפדפנים‬            ‫611 / 51‬
‫התאמת האתר‬‫לדפדפנים שונים‬                 ‫611 / 61‬
‫באילו דפדפנים משתמשים בישראל?‬‫מקור הנתונים‪: http://getclicky.com‬‬   ‫611 / 71‬
‫פלטפורמות חופשיות לבניית אתרים‬                        ‫- וורדפרס‬                          ‫- דרופל‬                    ...
‫נגישות‬     ‫611 / 91‬
‫מוגבלויות המשפיעות על השימוש‬                  ‫באינטרנט:‬                ‫(קוראי מסך, ברייל)‬     ‫עיוורון‬             ...
‫מהו אתר נגיש?‬‫אתר המאפשר לאנשים עם מוגבלות לגלוש באותה‬     ‫רמה של יעילות והנאה ככל הגולשים.‬                          ...
‫נגישות זה גם....‬ ‫‪( ROI‬יותר קהל, יותר מצליחים להשתמש)‬                     ‫‪( SEO‬פשוט ככה)‬                ‫שימושיות...
‫אה כן...‬‫אנשים‬   ‫611 / 32‬
‫על מה אנחנו מדברים?‬             ‫611 / 42‬
‫הנחיות להנגשת תכני אתרי אינטרנט)0.2 ‪(WCAG‬‬‫2‪j.mp/w3av‬‬                                       ‫611 / 52‬
‫4עקרונות‬                   ‫‪‬‬             ‫21קווים מנחים‬                   ‫‪‬‬              ‫מדדי הצלחה‬          ...
‫שלוש רמות נגישות ‪A, AA, AAA‬‬                     ‫611 / 72‬
‫תקן ישראלי‬     ‫בהכנה במכון התקנים‬    ‫•‬    ‫ביקורת הציבור – 1102‬   ‫•‬      ‫מבוסס על0.2 ‪WCAG‬‬     ‫•‬‫התאמה לסביב...
‫0.2 ‪WCAG‬‬‫21הקווים המנחים‬‫92‬              ‫611 / 92‬
‫21הקווים המנחים‬             ‫.3נהירּות‬                      ‫.1תפיסה‬          ‫1.3קריאּות‬          ‫1.1חלופה טקסטואלי...
‫עקרון 1: נתפס‬                ‫ניתן לתפוס מבחינה חושית‬                 .‫(את תוכן האתר‬perceive)it cant be invisible to ...
‫1.חלופה טקסטואלית‬  ‫(תיאור תמונה, פקדים בטפסים, חלופה ל‪(CAPTCHA‬‬‫05‪j.mp/w3il‬‬                                       ...
‫לא נגיש: טקסט ‪ alt‬חסר משמעות‬                         ‫33‬                       ‫611 / 33‬
‫נגיש: טקסט חלופי‬          ‫611 / 43‬
‫ראיה‬                           ‫שמיעה‬www.google.com/recaptcha35                              35 / 116
‫קישוט, עיצוב, תוכן בלתי־נראה–‬     ‫באופן שטכנולוגיה מסייעת יכולה להתעלם ממנו‬‫63‬                                       ...
‫2.חלופות עבור מדיה מבוססת-זמן‬‫(כתוביות לוידאו, או קול, תיאורים כתובים של צלילים‬  ‫משמעותיים, תיאורי אודיו למידע חזותי מ...
: Universal Subtitles ‫נגיש‬universalsubtitles.org                                    38 / 116
‫לא נגיש: אין תמלול לפודקסט‬‫‪bit.ly/f65m7O‬‬                       ‫611 / 93‬
‫3.תוכן הניתן להתאמה‬‫(תגיות נכונות וסמנטיות, הפרדת תוכן מעיצוב, קרבה בין‬              ‫אלמנטים קשורים, זיהוי כותרות ורשי...
‫נגיש: דוגמא – שינוי עיצוב‬standards.co.il     csszengarden.com                                       41 / 116
‫הדרכה בהבנת תוכן ובהפעלתו לא תסתמך רק על‬   ‫המאפיינים החושיים של מרכיבים, כגון צורה,‬               ‫גודל, מיקום חזותי, ...
‫המנעו מ:‬      ‫"הקטגוריות שבצד ימין"....‬     ‫"לחצו על הכפתור העגול ....‬‫34‬                          ‫611 / 34‬
‫4.בר הבחנה‬‫(הפרדת חזית מרקע – אי שימוש בצבע בלבד למשמעות,‬    ‫גודל אותיות בר הגדלה, אי שימוש בתמונה כטקסט,‬            ...
‫שימוש בצבע‬‫הדגישו גם באמצעות עיבוי, הוספת מסגרת שינוי רקע‬                  ‫1,‬‫8‪j.mp/w3ad‬‬                          ...
‫לא נגיש: שימוש בצבע בלבד להבעת משמעות‬‫‪kavhutz.wordpress.com‬‬             ‫611 / 64‬
‫ניגוד-צבעים‬                       ‫יחס-ניגוד של לפחות 1:5.4‬ ‫כי קשה לקרוא כאשר אין מספיק‬                     ‫ניגודיות...
‫לא נגיש: ניגודיות נמוכה בכותרת‬‫‪bit.ly/h26CQh‬‬                           ‫611 / 84‬
‫נגיש: כפתור לשינוי הניגודיות באתר‬‫‪nptech.org.il‬‬                                  ‫611 / 94‬
‫נגיש: כפתורים לשינוי הניגודיות וגודל‬                                 ‫הטקסט‬‫‪j.mp/accessbb‬‬                           ...
‫נגיש: אפשרות להגדלת הטקסט‬‫‪guardian.co.uk‬‬                              ‫611 / 15‬
‫שליטה בשמע: אם יש מוסיקה אוטומטי (ליותר מ-3‬               ‫שניות) – ניתן להפסיק /להחליש‬                                ...
‫עקרון 2: ניתן להפעלה‬            .‫המרכיבים והניווט ניתנים להפעלה‬the interface cannot requireinteraction that a user can...
‫1.2תפקוד מלא ממקלדת‬  ‫(הגעה לכל הניווט, אין מלכודות מקלדת)‬                               ‫611 / 45‬
‫לא נגיש: במעבר מקלדת – אי אפשר‬                 ‫לראות איפה הפוקוס‬‫‪businessinsider.com‬‬          ‫611 / 55‬
‫נגיש: פוקוס נראה לעין‬accessibletwitter.com                                        56 / 116
‫לא נגיש: אין תמיכה מלאה במקלדת‬                      ‫בתפריט עליון‬‫‪whitehouse.gov‬‬                ‫611 / 75‬
‫נגיש: גישה לניווט באמצעות המקלדת‬‫‪nagish.org.il‬‬                               ‫611 / 85‬
‫2.2מספיק זמן‬ ‫(הזהרה מפני סיום ,‪ session‬אפשרות הארכה, עצירת תנועה‬‫ואיתחולה, עצירת עדכונים, אי הקצבת זמן לפעולה (אם אפ...
‫נגיש: שליטה בעדכון אוטומטי‬‫‪downrightnow.com‬‬                                ‫611 / 06‬
‫שמירת מידע בטופס בכדי אם נדרש אימות המשתמש‬                 ‫)‪(authentication‬לפני הגשתו‬                               ...
‫הארכת ה ‪-session‬בשירותים מקוונים של‬                              ‫הבנק‬                              ‫611 / 26‬
‫3.2מניעת התקפים‬‫(עצירת תזוזה, מנעת הבהובים וחלקים זזים)‬                                ‫611 / 36‬
‫- לא יותר מ-3 הבהובים בשניה (או שאינו עובר את‬                                      ‫הסף)‬                    ‫- איזורים ...
‫נגיש: סמל מהבהב – מעט ולא בולט‬‫‪gov.il‬‬                                  ‫611 / 56‬
‫לא נגיש: הרבה תנועה, צבעוני, גדול‬it.themarker.com/tmit/article/13885                                      66 / 116
‫נגיש: כפתור עצירת תנועה‬‫‪www.leumi.co.il‬‬                                    ‫611 / 76‬
‫נגיש: כפתור עצירת תנועה‬‫‪nagish.org.il‬‬                                  ‫611 / 86‬
‫4.2 קלות ניווט ומציאת מידע‬‫(מספר דרכים לאותו תוכן, דפים מובנים עם כותרות נכונות,‬  ‫קישורים ברורים, עקיפת בלוקים החוזרים...
‫נגיש: קישור ישיר לתוכן (גלוי או מוסתר)‬‫‪nagish.org.il‬‬                                 ‫611 / 07‬
‫נגיש: השתמשו בפירורי לחם‬‫‪education.gov.il‬‬                                  ‫611 / 17‬
‫נגיש:‬             ‫מפת אתר‬‫‪coi.gov.uk‬‬                ‫611 / 27‬
‫טקסט בעל משמעות בקישורים‬‫‪ X‬לקריאת התוכנית המלאה לחץ‬                       ‫כאן‬  ‫קראו את התוכנית המלאה‬   ‫‪V‬‬     ...
‫נגיש: כותרות ברורות....‬               ‫‪vs‬‬‫‪j.mp/ackdi‬‬                               ‫611 / 47‬
‫עקרון 3: ניתן להבנה‬                  ‫הטקסט ניתן לקראה ולהבנה‬the content or operation cannot bebeyond their understandi...
‫1.3 טקסט בר הבנה‬‫(רמת הטקסט, זיהוי השפה בדף כולו ובחלקיו, פירוש קיצורים‬                                                ...
‫(למעט טקסט משפטי)‬           ‫611 / 77‬
‫2.תפעול ותצוגה צפויים‬‫(אי שינוי ההקשר בפוקוס או בלי שהמשתמש ביקש, ניווט‬                                            ‫עקב...
‫לא נגיש: איבוד פוקוס בניווט מקלדת‬‫‪ustream.tv‬‬                                        ‫611 / 97‬
‫3.תמיכה בהזנה‬‫(הסבר מדויק לטעיות, הסבר על מה צריך להזין, ולידציה,‬                                        ‫טקסט עזרה)‬  ...
‫דרכי מניעת טעויות בטפסים‬‫• הפיכּות - ניתן לבטל הפעולה‬        ‫• אישור - תצוגה מקדימה‬ ‫• בדיקה – בדיקת הערכים שהוזנו‬  ...
:‫נגיש‬www.data.gov.uk/user/regist   82 / 116
‫נגיש: זיהוי שגיאות והצגתן בראש הטופס‬‫/‪farukat.es/contact‬‬                                      ‫611 / 38‬
‫נגיש: עזרה בעת זיהוי טעות בטופס‬                        ‫הצעת תיקון אפשרי‬‫‪los.direct.gov.uk‬‬                          ...
‫עזרה‬          ‫- קישור לטקסט עזרה‬‫- הצגת דוגמאות לערכים נכונים‬                      ‫611 / 58‬
‫עקרון 4 - יציבות‬         ‫תאימות מרבית עם דפדפנים, תוכנות וכדומה‬as technologies and user agentsevolve, the content shou...
‫‪.1 Parsing‬‬‫כתוב קוד תקין‬                 ‫611 / 78‬
‫בדקו את תקינות ה ‪-HTML‬וה‪-CSS‬‬    ‫• בודק תקינות‪HTML - validator.w3.org‬‬       ‫• בודק תקינות‪j.mp/w3add1 - CSS‬‬   ...
WAI-ARIA…            89 / 116
‫לסיכום‬‫09‬              ‫611 / 09‬
‫אתרים יפים... ונגישים‬accessibleculture.org   nomensa.com    copious.co.uk                                               ...
‫טיפים לאתר איכותי‬‫(כמובן שזה תלוי בהיקף, תקציב וצורך. ייתכן ואתר קטן ופשוט יספיק!)‬                                     ...
!‫צרו קשר‬              ‫אייל סלע‬        eyal@isoc.org.il@isociltech @eyalsela               : ‫המצגת‬                   ...
Upcoming SlideShare
Loading in …5
×

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

2,443 views
2,378 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,443
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  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

×