כלים ושיטות להנגשת אתרי אינטרנט על פי WCAG 2.0

1,354 views

Published on

http://www.w3c.org.il

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

  • Be the first to like this

No Downloads
Views
Total views
1,354
On SlideShare
0
From Embeds
0
Number of Embeds
476
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

כלים ושיטות להנגשת אתרי אינטרנט על פי WCAG 2.0

  1. 1. ‫1102/2/32‬ ‫כלים ושיטות להנגשת אתרי אינטרנט‬ ‫על פי 0.2 ‪WCAG‬‬ ‫אייל סלע‬ ‫מנהל פרויקטים, איגוד האינטרנט הישראלי‬ ‫ומשרד ה-‪ W3C‬הישראלי‬ ‫611 / 1‬
  2. 2. ‫תוכנית...‬ ‫מהי נגישות‬ ‫•‬ ‫כלים‬ ‫•‬‫21 הקווים המנחים - 0.2 ‪WCAG‬‬ ‫•‬ ‫סיכום‬ ‫•‬ ‫611 / 2‬
  3. 3. ‫איגוד האינטרנט הישראלי‬ ‫שלוחת האיגוד הבינלאומי‬ ‫עמותה ללא מטרת רווח‬‫פועל לקידום האינטרנט והטמעתו בישראל כתשתית‬ ‫טכנולוגית, מחקרית, חינוכית, חברתית ועסקית‬ ‫611 / 3‬
  4. 4. ‫‪W3C‬‬ ‫• ארגון בינלאומי‬ ‫• כ-053 ארגונים‬ ‫• פורום ניטראלי ליצירת תקני הווב‬ ‫• משימה:‬‫להוביל את הרשת למיצוי הפוטנציאל על ידי פיתוח‬‫פרוטוקולים וקווים מנחים שיאפשרו את צמיחתה‬ ‫לטווח ארוך.‬ ‫4‬ ‫611 / 4‬
  5. 5. ‫מהי‬‫נגישות‬ ‫611 / 5‬
  6. 6. ‫מוגבלויות המשפיעות על השימוש באינטרנט:‬ ‫(קוראי מסך, ברייל)‬ ‫עיוורון‬ ‫ראייה לקויה (מגדילי מסך)‬ ‫עיוורון צבעים‬ ‫שמיעה‬ ‫קוגניציה‬ ‫מוטוריקה (עזרי ניווט, אי שימוש בעכבר)‬ ‫611 / 6‬
  7. 7. ‫מהו אתר נגיש?‬‫אתר המאפשר לאנשים עם מוגבלות לגלוש באותה רמה‬ ‫של יעילות והנאה ככל הגולשים.‬ ‫611 / 7‬
  8. 8. ‫נגישות זה גם....‬ ‫(יותר קהל, יותר מצליחים להשתמש)‬ ‫‪ROI‬‬ ‫‪( SEO‬פשוט ככה...)‬ ‫שימושיות (תת קבוצה)‬‫‪( Mobile‬יש חפיפה בין צרכי המשתמשים)‬ ‫מקצועיות (מרגישים את ההבדל)‬ ‫חוק (בקרוב...)‬ ‫שוק מתרחב (עלייה בתוחלת החיים)‬ ‫611 / 8‬
  9. 9. ‫אה כן...‬‫אנשים‬ ‫611 / 9‬
  10. 10. ‫על מה אנחנו מדברים?‬ ‫611 / 01‬
  11. 11. ‫הנחיות להנגשת תכני אתרי אינטרנט 0.2 )‪(WCAG‬‬‫2‪j.mp/w3av‬‬ ‫611 / 11‬
  12. 12. ‫4 עקרונות‬ ‫‪‬‬ ‫21 קווים מנחים‬ ‫‪‬‬ ‫מדדי הצלחה‬ ‫)‪)‬‬ ‫שיטות‬‫‪j.mp/w3ada‬‬ ‫611 / 21‬
  13. 13. ‫שלוש רמות נגישות – ‪AAA ,AA ,A‬‬ ‫611 / 31‬
  14. 14. ‫תקן ישראלי‬ ‫בהכנה במכון התקנים‬ ‫•‬ ‫ביקורת הציבור – 1102‬ ‫•‬ ‫מבוסס על 0.2 ‪WCAG‬‬ ‫•‬‫התאמה לסביבה הישראלית‬ ‫•‬ ‫611 / 41‬
  15. 15. ‫כלים‬ ‫611 / 51‬
  16. 16. ‫כלי עזר: מנוע חיפוש לאלמנטים ב-‪HTML, CSS‬‬ ‫וגם –‬ ‫• נגישות‬ ‫• ‪Mobile‬‬ ‫• ‪SVG‬‬ ‫דוגמא...‬‫8‪j.mp/w3cmo‬‬ ‫611 / 61‬
  17. 17. ‫דוגמא – חיפוש ‪title‬‬ ‫611 / 71‬
  18. 18. nagish.org.il 18 / 116
  19. 19. Techniques for WCAG 2.0 (single file)j.mp/w3il64 19 19 / 116
  20. 20. ‫0.2 ‪WCAG‬‬‫21 הקווים המנחים‬‫02‬ ‫611 / 02‬
  21. 21. ‫21 הקווים המנחים‬ ‫3. נהירּות‬ ‫1. תפיסה‬ ‫1.3 קריאּות‬ ‫1.1 חלופה טקסטואלית‬‫2.3 תפקוד באופן צפוי‬ ‫2.1 מדיה מבוססת־זמן‬ ‫3.1 גמישות‬‫3.3 עזרה בהזנת קלט‬ ‫4.1 הבחנה‬ ‫4. יציבות‬ ‫2. תפעול‬ ‫1.4 תאימּות‬ ‫1.2 נגישות מהמקלדת‬ ‫2.2 משך־זמן מספיק‬ ‫3.2 מניעת התקפים אפילפטיים‬ ‫4.2 ניווט נוח‬ ‫611 / 12‬
  22. 22. ‫עקרון 1: נתפס‬ )perceive( ‫ניתן לתפוס מבחינה חושית‬ .‫את תוכן האתר‬it cant be invisible to all of their senses 22 / 116
  23. 23. ‫1.1 חלופה טקסטואלית‬ ‫(תיאור תמונה, פקדים בטפסים, חלופה ל-‪) CAPTCHA‬‬‫05‪j.mp/w3il‬‬ ‫611 / 32‬
  24. 24. alt-‫נגיש: שימוש ב‬<img src="newsletter.gif" alt="Free newsletter. Get free recipes, news, and more. Learn more." /> )vs title (j.mp/w3il51 24 / 116
  25. 25. ‫לא נגיש: טקסט ‪ alt‬חסר משמעות‬ ‫52‬ ‫611 / 52‬
  26. 26. Label element or title attribute :‫נגיש‬<label for="searchTerm">Search for:</label><input id="searchTerm" type="text" size="30" value="" name="searchTerm"> ...‫או לפחות‬<select title="Search in" id="scope"> …</select>j.mp/w3il52 26 / 116
  27. 27. ‫נגיש: טקסט חלופי‬ ‫611 / 72‬
  28. 28. ‫ראיה‬ ‫שמיעה‬www.google.com/recaptcha 28 28 / 116
  29. 29. ‫קישוט, עיצוב, תוכן בלתי־נראה –‬ ‫באופן שטכנולוגיה מסייעת יכולה להתעלם ממנו‬‫92‬ ‫611 / 92‬
  30. 30. ‫2.1 חלופות עבור מדיה מבוססת-זמן‬ ‫(כתוביות לוידאו, או קול, תיאורים כתובים של צלילים‬ ‫משמעותיים, תיאורי אודיו למידע חזותי משמעותי)‬ ‫611 / 03‬
  31. 31. Universal Subtitles :‫נגיש‬universalsubtitles.org 31 / 116
  32. 32. ‫לא נגיש: אין תמלול לפודקסט‬‫‪bit.ly/f65m7O‬‬ ‫611 / 23‬
  33. 33. ‫נגיש: יעוץ משפטי מבוסס וידאו -‬ ‫בשפת הסימנים.‬‫-‪radlegalservices.org.uk/bsl‬‬ ‫611 / 33‬
  34. 34. ‫3.1 תוכן הניתן להתאמה‬‫(תגיות נכונות וסמנטיות, הפרדת תוכן מעיצוב, קרבה בין‬ ‫אלמנטים קשורים, זיהוי כותרות ורשימות)‬ ‫611 / 43‬
  35. 35. ‫נגיש: הפרידו תוכן מעיצוב‬ ‫אותו אתר,‬ ‫ללא ‪CSS‬‬ ‫• ‪ HTML‬לתוכן‬ ‫דוגמא...‬ ‫• ‪ CSS‬לעיצוב‬ ‫• עיצוב ללא טבלאות‬‫321‪j.mp/dkrg‬‬ ‫611 / 53‬
  36. 36. ‫נגיש: דוגמא – שינוי עיצוב‬standards.co.il csszengarden.com 36 / 116
  37. 37. ‫נגיש: אלמנטים סמנטיים‬ ‫כותרות - >6‪<h1> – <h‬‬ ‫•‬‫רשימות ותפריטים - >‪ <ul‬ו >‪<ui‬‬ ‫•‬ ‫פסקה - >‪<p‬‬ ‫•‬ ‫הדגשה - >‪<strong‬‬ ‫•‬ ‫611 / 73‬
  38. 38. ‫לא נגיש: שימוש לא נכון בכותרות‬‫‪lifehacker.com‬‬ ‫611 / 83‬
  39. 39. ‫נגיש: שימוש נכון בכותרות‬weboverhauls.com/dennislembree/ 39 / 116
  40. 40. ‫לא נגיש: אין כותרות‬‫‪Gov.il‬‬ ‫611 / 04‬
  41. 41. Failure Example 1: A heading :‫לא נגיש‬ used only for visual effect<p>Interested in learning more? Write to us at</p><h4>3333 Third Avenue, Suite 300 · New York City</h4><p>And well send you the complete informational packet absolutely Free!</p><h1>Study on the Use of Heading Elements in Web Pages</h1><h3>Joe Jones and Mary Smith<h3><h4>March 14, 2006</h4><h2>Abstract</h2><p>A study was conducted in early 2006 …</p> 41 / 116
  42. 42. ‫קישורים ברורים ודילוג לתוכן‬a span.hide {height: 1px;width: 1px;position: absolute;overflow: hidden;top: -10px;} 42 / 116
  43. 43. -‫תגיות חדשות לשיפור סמנטיקה ב‬ HTML5<header><section><footer><nav><article><aside>… 43 / 116
  44. 44. ‫הדרכה בהבנת תוכן ובהפעלתו לא תסתמך רק על‬‫המאפיינים החושיים של מרכיבים, כגון צורה, גודל,‬ ‫מיקום חזותי, כיוון או צליל.‬‫44‬ ‫611 / 44‬
  45. 45. ‫לא נגיש: תגיות – העברת משמעות רק בעיצוב‬ ‫בלי‬ ‫‪CSS‬‬ ‫611 / 54‬
  46. 46. ‫המנעו מ:‬ ‫"הקטגוריות שבצד ימין ...."‬ ‫"לחצו על הכפתור העגול....‬‫64‬ ‫611 / 64‬
  47. 47. ‫נגיש: מידע המועבר בצבע בלבד – נמצא גם‬ ‫בטקסט ומוסתר בעזרת ‪CSS‬‬‫‪caniuse.com/datalist‬‬ ‫611 / 74‬
  48. 48. ‫לא נגיש: אי אפשר לדעת מה מסומן בלי ‪CSS‬‬‫‪initializr.com‬‬ ‫611 / 84‬
  49. 49. ‫4.1 בר הבחנה‬‫(הפרדת חזית מרקע – אי שימוש בצבע בלבד למשמעות, גודל‬ ‫אותיות בר הגדלה, אי שימוש בתמונה כטקסט, ניגודיות)‬ ‫611 / 94‬
  50. 50. ‫שימוש בצבע‬‫הדגישו גם באמצעות עיבוי, הוספת מסגרת, 1שינוי רקע‬‫8‪j.mp/w3ad‬‬ ‫611 / 05‬
  51. 51. ‫לא נגיש: שימוש בצבע בלבד להבעת משמעות‬‫‪kavhutz.wordpress.com‬‬ ‫611 / 15‬
  52. 52. ‫ניגוד-צבעים‬ ‫יחס-ניגוד של לפחות 1:5.4‬ ‫כי קשה לקרוא כאשר אין מספיק‬ ‫ניגודיות‬‫)השתמשו בבודק ניגודיות: 9‪(j.mp/cont123 ,j.mp/w3ad‬‬ ‫611 / 25‬
  53. 53. ‫לא נגיש: ניגודיות נמוכה בכותרת‬‫‪bit.ly/h26CQh‬‬ ‫611 / 35‬
  54. 54. ‫נגיש: כפתור לשינוי הניגודיות באתר‬‫‪nptech.org.il‬‬ ‫611 / 45‬
  55. 55. ‫נגיש: כפתורים לשינוי הניגודיות וגודל‬ ‫הטקסט‬‫‪j.mp/accessbb‬‬ ‫611 / 55‬
  56. 56. ‫נגיש: אפשרות להגדלת הטקסט‬‫‪guardian.co.uk‬‬ ‫611 / 65‬
  57. 57. Or Just fluied :‫נגיש‬ 57 / 116
  58. 58. ‫שליטה בשמע: אם יש מוסיקה אוטומטי (ליותר מ-3‬ ‫שניות) – ניתן להפסיק /להחליש‬‫דוגמא:‬ ‫611 / 85‬
  59. 59. ‫לא מצאתי‬ ‫611 / 95‬
  60. 60. ‫עקרון 2: ניתן להפעלה‬ .‫המרכיבים והניווט ניתנים להפעלה‬the interface cannot requireinteraction that a user cannot perform 60 / 116
  61. 61. ‫1.2 תפקוד מלא ממקלדת‬ ‫(הגעה לכל הניווט, אין מלכודות מקלדת)‬ ‫611 / 16‬
  62. 62. ‫לא נגיש: במעבר מקלדת – אי אפשר‬ ‫לראות איפה הפוקוס‬‫‪businessinsider.com‬‬ ‫611 / 26‬
  63. 63. ‫נגיש: פוקוס נראה לעין‬accessibletwitter.com 63 / 116
  64. 64. event handlers-‫השתמשו ב‬ ‫מקבילים‬j.mp/w3il54 64 / 116
  65. 65. ‫לא נגיש: אין תמיכה מלאה במקלדת‬ ‫בתפריט עליון‬‫‪whitehouse.gov‬‬ ‫611 / 56‬
  66. 66. ‫לא נגיש: הסתמכות על ‪ :hover‬בלבד‬ ‫+ ניגודיות נמוכה‬‫‪helppassiton.co.uk‬‬ ‫611 / 66‬
  67. 67. ‫נגיש: גישה לניווט באמצעות המקלדת‬‫‪nagish.org.il‬‬ ‫611 / 76‬
  68. 68. ‫נגיש: ספקו חלופה לגרירה‬ ‫מצב נגישות בוורדפרס‬‫55‪j.mp/w3il‬‬ ‫611 / 86‬
  69. 69. moseover ‫לא נגיש: פועל רק עם‬j.mp/isl12 69 / 116
  70. 70. ‫לא נגיש: מלכודת מקלדת‬‫‪j.mp/werjtfs‬‬ ‫611 / 07‬
  71. 71. ‫נגיש: מקשי קיצור בפייסבוק‬ ‫611 / 17‬
  72. 72. ‫2.2 מספיק זמן‬ ‫(הזהרה מפני סיום ‪ ,session‬אפשרות הארכה, עצירת תנועה‬‫ואיתחולה, עצירת עדכונים, אי הקצבת זמן לפעולה (אם אפשר) )‬ ‫611 / 27‬
  73. 73. ‫נגיש: שליטה בעדכון אוטומטי‬‫‪downrightnow.com‬‬ ‫611 / 37‬
  74. 74. ‫שמירת מידע בטופס בכדי אם נדרש אימות המשתמש‬ ‫(‪ )authentication‬לפני הגשתו‬ ‫611 / 47‬
  75. 75. ‫הארכת ה-‪ session‬בשירותים מקוונים של‬ ‫הבנק‬ ‫611 / 57‬
  76. 76. ‫3.2 מניעת התקפים‬‫(עצירת תזוזה, מנעת הבהובים וחלקים זזים)‬ ‫611 / 67‬
  77. 77. ‫- לא יותר מ-3 הבהובים בשניה (או שאינו עובר את הסף)‬ ‫- איזורים מהבהבים - קטנים‬ ‫611 / 77‬
  78. 78. ‫נגיש: סמל מהבהב – מעט ולא בולט‬‫‪gov.il‬‬ ‫611 / 87‬
  79. 79. ‫לא נגיש: הרבה תנועה, צבעוני, גדול‬it.themarker.com/tmit/article/13885 79 / 116
  80. 80. ‫נגיש: כפתור עצירת תנועה‬‫‪www.leumi.co.il‬‬ ‫611 / 08‬
  81. 81. ‫נגיש: כפתור עצירת תנועה‬‫‪nagish.org.il‬‬ ‫611 / 18‬
  82. 82. ‫4.2 קלות ניווט ומציאת מידע‬ ‫(מספר דרכים לאותו תוכן, דפים מובנים עם כותרות נכונות,‬‫קישורים ברורים, עקיפת בלוקים החוזרים על עצמם, סדר פוקוס‬ ‫נכון)‬ ‫611 / 28‬
  83. 83. ‫נגיש: קישור ישיר לתוכן (גלוי או‬ ‫מוסתר)‬‫‪nagish.org.il‬‬ ‫611 / 38‬
  84. 84. ‫נגיש: השתמשו בפירורי לחם‬‫‪education.gov.il‬‬ ‫611 / 48‬
  85. 85. ‫נגיש:‬ ‫מפת אתר‬ ‫(מבוסס על סיפור אמיתי)‬‫‪coi.gov.uk‬‬ ‫611 / 58‬
  86. 86. ‫טקסט בעל משמעות בקישורים‬‫‪ X‬לקריאת התוכנית המלאה לחץ כאן‬ ‫קראו את התוכנית המלאה‬ ‫‪V‬‬ ‫611 / 68‬
  87. 87. ‫נגיש: כותרות ברורות....‬ ‫‪vs‬‬‫‪j.mp/ackdi‬‬ ‫611 / 78‬
  88. 88. ‫עקרון 3: ניתן להבנה‬ ‫הטקסט ניתן לקראה ולהבנה‬the content or operation cannot bebeyond their understanding 88 / 116
  89. 89. ‫1.3 טקסט בר הבנה‬‫(רמת הטקסט, זיהוי השפה בדף כולו ובחלקיו, פירוש קיצורים‬ ‫וזרגון)‬ ‫611 / 98‬
  90. 90. ‫נגיש: זיהוי שפת הטקסט‬<html lang="fr"><html xml:lang="he”> 90 / 116
  91. 91. ‫(למעט טקסט משפטי)‬ ‫611 / 19‬
  92. 92. ‫נגיש: הרחבת קיצורים‬<p>Tasini <abbr title="andothers">et al.</abbr> <abbrtitle="versus">v.</abbr> The NewYork Times 92 / 116
  93. 93. ‫2.3 תפעול ותצוגה צפויים‬‫(אי שינוי ההקשר בפוקוס או בלי שהמשתמש ביקש, ניווט עקבי)‬ ‫611 / 39‬
  94. 94. ‫נגיש: לא לשנות את העמוד באופן משמעותי‬ ‫בגלל פוקוס על אלמנט‬‫‪w3c.org‬‬ ‫611 / 49‬
  95. 95. ‫לא נגיש: איבוד פוקוס בניווט מקלדת‬‫‪ustream.tv‬‬ ‫611 / 59‬
  96. 96. ‫3.3 תמיכה בהזנה‬‫הסבר מדויק לטעיות, הסבר על מה צריך להזין, ולידציה, טקסט‬ ‫עזרה)‬ ‫(בנייה חכמה של טפסים)‬ ‫611 / 69‬
  97. 97. ‫דרכי מניעת טעויות בטפסים‬‫• הפיכּות - ניתן לבטל הפעולה‬ ‫• אישור - תצוגה מקדימה‬ ‫• בדיקה – בדיקת הערכים שהוזנו‬ ‫611 / 79‬
  98. 98. ‫נגיש: טופס בנוי היטב‬ ‫שגיאות מוצגות כקישורים בראש הטופס‬ ‫•‬ ‫מוסבר מה הטעות באופן מדויק‬ ‫•‬ ‫<”‪>label for=“x‬‬ ‫•‬ ‫אין ‪...CAPTCH‬‬ ‫•‬ ‫(חסר: ולידציה לאימייל!!)‬ ‫•‬‫‪webaim.org/contact‬‬ ‫611 / 89‬
  99. 99. :‫נגיש‬www.data.gov.uk/user/regist 99 / 116
  100. 100. ‫נגיש: זיהוי שגיאות והצגתן בראש הטופס‬‫/‪farukat.es/contact‬‬ ‫611 / 001‬
  101. 101. ‫נגיש: עזרה בעת זיהוי טעות בטופס‬ ‫הצעת תיקון אפשרי‬‫‪los.direct.gov.uk‬‬ ‫611 / 101‬
  102. 102. ‫עזרה‬ ‫- קישור לטקסט עזרה‬‫- הצגת דוגמאות לערכים נכונים‬ ‫611 / 201‬
  103. 103. ‫עקרון 4 - יציבות‬ ‫תאימות מרבית עם דפדפנים, תוכנות וכדומה‬as technologies and user agents evolve,the content should remain accessible 103 / 116
  104. 104. ‫1.4 ‪Parsing‬‬‫(תג פתיחה וסגירה, קינון נכון, אי כפילות ‪IDs are ,attributes‬‬ ‫‪)unique‬‬ ‫לכתוב קוד תקין‬ ‫611 / 401‬
  105. 105. ‫בדקו את תקינות ה-‪ HTML‬וה-‪CSS‬‬ ‫• בודק תקינות ‪validator.w3.org - HTML‬‬ ‫• בודק תקינות ‪j.mp/w3add1 - CSS‬‬ ‫611 / 501‬
  106. 106. ‫2.4 שם-תפקיד-ערך‬ ‫(שימוש בפקדים רגילים פותר את זה)‬ ‫611 / 601‬
  107. 107. :‫לדוגמה‬ "‫• שם: "קראתי את תנאי השימוש‬ checkbox :‫• תפקיד‬ ."‫• ערך: "מסומן‬<input type="checkbox" id="markuplang"name="computerskills" checked="checked“ /><label for="markuplang"> ‫קראתי את תנאי השימוש‬</label> 107 / 116
  108. 108. Accessibility API -‫אודות ה‬ ‫של המערכת‬used to communicate accessibility informationabout user interfaces to assistive technologies. Java accessiblity - j.mp/w3il59 Flash accessibility - j.mp/w3il60j.mp/aceess 108 / 116
  109. 109. Using the title attribute of the frameand iframe elements 109 / 116
  110. 110. WAI-ARIA… 110 / 116
  111. 111. ‫ בעזרת‬checkbox ‫לא נגיש: יצירת‬ ‫ ו-תמונה‬span )WAI-ARIA ‫(ניתן להנגיש בעזרת‬<p> <span onclick="toggleCheckbox(chkbox)"><img src="unchecked.gif" id="chkbox" alt="">Include Signature </span> </p>j.mp/sdgtwq 111 / 116
  112. 112. ‫לסיכום‬‫211‬ ‫611 / 211‬
  113. 113. ‫אתרים יפים... ונגישים‬accessibleculture.org nomensa.com copious.co.uk 113 / 116
  114. 114. ‫עזרה‬accessifyforum.com 114 / 116
  115. 115. ‫איך מתחילים‬ ‫1. קראו את 0.2 ‪( WCAG‬בעברית)‬ ‫2. שימרו את הכלים מהמצגת – קרובים‬ ‫(3. הרשמו למקורות מידע)‬‫4. בזמן התכנון והפיתוח – היו בקרותיים וחישבו על‬ ‫נגישות‬ ‫611 / 511‬
  116. 116. !‫צרו קשר‬ ‫אייל סלע‬ eyal@isoc.org.il@isociltech @eyalsela 116 / 116

×