כלים ושיטות להנגשת אתרי אינטרנט

21,997 views

Published on

מצגת לכנס וורדקאמפ 2010

W3C ישראל
www.w3c.org.il

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

No Downloads
Views
Total views
21,997
On SlideShare
0
From Embeds
0
Number of Embeds
356
Actions
Shares
0
Downloads
10
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

כלים ושיטות להנגשת אתרי אינטרנט

  1. 1. ‫0102/9/5‬ ‫כלים ושיטות להנגשת אתרי אינטרנט‬ ‫אייל סלע‬ ‫מנהל פרויקטים, איגוד האינטרנט הישראלי‬ ‫ומשרד ה-‪ W3C‬הישראלי‬ ‫‪www.isoc.org.il‬‬ ‫‪www.w3c.org.il‬‬ ‫37 1‬ ‫‪eyal@isoc.org.il‬‬
  2. 2. ‫או‬ ‫21 דברים שצריך לדעת על נגישות באינטרנט‬ www.isoc.org.il www.w3c.org.il 2 73 eyal@isoc.org.il
  3. 3. j.mp/w3cdoc www.isoc.org.il www.w3c.org.il 3 73 eyal@isoc.org.il
  4. 4. ‫תוכנית...‬ ‫מבוא‬ ‫•‬ ‫נגישות‬ ‫•‬ ‫כלים‬ ‫•‬ ‫21 קווים מנחים‬ ‫•‬ ‫איך מתחילים‬ ‫•‬ ‫‪www.isoc.org.il‬‬ ‫‪www.w3c.org.il‬‬ ‫37 4‬ ‫‪eyal@isoc.org.il‬‬
  5. 5. ‫אודות: איגוד האינטרנט הישראלי‬ ‫שלוחת האיגוד הבינלאומי:‬ ‫עמותה ללא מטרת רווח‬ ‫פועל לקידום האינטרנט והטמעתו בישראל‬ ‫כתשתית טכנולוגית, מחקרית, חינוכית, חברתית‬ ‫ועסקית.‬ ‫‪www.isoc.org.il‬‬ ‫‪www.w3c.org.il‬‬ ‫37 5‬ ‫‪eyal@isoc.org.il‬‬
  6. 6. ‫‪W3C‬‬ ‫ארגון בינלאומי‬ ‫כ-053 ארגונים‬ ‫פורום ניטראלי ליצירת תקני רשת באינטרנט.‬ ‫משימה:‬ ‫להוביל את הרשת למיצוי הפוטנציאל על ידי פיתוח‬ ‫פרוטוקולים וקווים מנחים שיאפשרו את צמיחתה לטווח‬ ‫ארוך.‬ ‫‪www.isoc.org.il‬‬ ‫‪www.w3c.org.il‬‬ ‫37 6‬ ‫‪eyal@isoc.org.il‬‬
  7. 7. ‫נגישות‬ www.isoc.org.il www.w3c.org.il 7 73 eyal@isoc.org.il
  8. 8. ‫מוגבלויות המשפיעות על השימוש באינטרנט:‬ ‫(קוראי מסך, ברייל)‬ ‫עיוורון‬ ‫ראייה לקויה (מגדילי מסך)‬ ‫עיוורון צבעים‬ ‫שמיעה‬ ‫קוגניציה‬ ‫מוטוריקה (עזרי ניווט, אי שימוש בעכבר)‬ ‫‪www.isoc.org.il‬‬ ‫‪www.w3c.org.il‬‬ ‫37 8‬ ‫‪eyal@isoc.org.il‬‬
  9. 9. ‫מהו אתר נגיש?‬ ‫אתר המאפשר לאנשים עם מוגבלות לגלוש באותה רמה‬ ‫של יעילות והנאה ככל הגולשים.‬ ‫‪www.isoc.org.il‬‬ ‫‪www.w3c.org.il‬‬ ‫37 9‬ ‫‪eyal@isoc.org.il‬‬
  10. 10. ‫נגישות זה גם....‬ ‫(יותר קהל, יותר מצליחים להשתמש)‬ ‫‪ROI‬‬ ‫‪( SEO‬פשוט ככה...)‬ ‫שימושיות (תת קבוצה)‬ ‫‪( Mobile‬יש חפיפה בין צרכי המשתמשים)‬ ‫מקצועיות (מרגישים את ההבדל)‬ ‫חוק (בקרוב...)‬ ‫עתיד (עלייה בתוחלת החיים)‬ ‫‪www.isoc.org.il‬‬ ‫‪www.w3c.org.il‬‬ ‫37 01‬ ‫‪eyal@isoc.org.il‬‬
  11. 11. ...‫אה כן‬ ‫אנשים‬ www.isoc.org.il www.w3c.org.il 11 73 eyal@isoc.org.il
  12. 12. ?‫על מה אנחנו מדברים‬ www.isoc.org.il www.w3c.org.il 12 73 eyal@isoc.org.il
  13. 13. (WCAG) 2.0 ‫הנחיות להנגשת תכני אתרי אינטרנט‬ j.mp/w3av2 www.isoc.org.il www.w3c.org.il 13 73 eyal@isoc.org.il
  14. 14. ‫4 עקרונות‬  ‫21 קווים מנחים‬  ‫מדדי הצלחה‬ )) ‫שיטות‬ j.mp/w3ada www.isoc.org.il www.w3c.org.il 14 73 eyal@isoc.org.il
  15. 15. AAA ,AA ,A – ‫שלוש רמות נגישות‬ www.isoc.org.il www.w3c.org.il 15 73 eyal@isoc.org.il
  16. 16. ‫כלים‬ www.isoc.org.il www.w3c.org.il 16 73 eyal@isoc.org.il
  17. 17. HTML, CSS-‫כלי עזר: מנוע חיפוש לאלמנטים ב‬ – ‫וגם‬ ‫• נגישות‬ Mobile • SVG • ...‫דוגמא‬ j.mp/w3cmo8 www.isoc.org.il www.w3c.org.il 17 73 eyal@isoc.org.il
  18. 18. title ‫דוגמא – חיפוש‬ www.w3c.org.il
  19. 19. nagish.org.il It’s wordpress! www.isoc.org.il www.w3c.org.il 19 73 eyal@isoc.org.il
  20. 20. Techniques for WCAG 2.0 (single file) j.mp/w3il64 www.isoc.org.il www.w3c.org.il 20 73 eyal@isoc.org.il
  21. 21. ‫21 קווים מנחים‬ 21 www.w3c.org.il
  22. 22. ‫עקרון 1: נתפס‬ )perceive( ‫ניתן 'לתפוס' מבחינה חושית‬ .‫את תוכן האתר‬ www.isoc.org.il www.w3c.org.il 22 73 eyal@isoc.org.il
  23. 23. ‫1.1 חלופה טקסטואלית (תיאור תמונה, פקדים‬ ) CAPTCHA-‫בטפסים, חלופה ל‬ j.mp/w3il50 www.isoc.org.il www.w3c.org.il 23 73 eyal@isoc.org.il
  24. 24. alt-‫שימוש ב‬ <img src="newsletter.gif" alt="Free newsletter. Get free recipes, news, and more. Learn more." /> j.mp/w3il51 www.isoc.org.il www.w3c.org.il 24 73 eyal@isoc.org.il
  25. 25. 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 www.isoc.org.il www.w3c.org.il 25 73 eyal@isoc.org.il
  26. 26. ‫טקסט חלופי‬ www.w3c.org.il 26
  27. 27. ‫2.1 חלופות עבור מדיה מבוססת-זמן (כתוביות לוידאו, או‬ ‫קול, תיאורים כתובים של צלילים משמעותיים, תיאורי אודיו‬ ‫למידע חזותי משמעותי)‬ ‫‪www.isoc.org.il‬‬ ‫‪www.w3c.org.il‬‬ ‫37 72‬ ‫‪eyal@isoc.org.il‬‬
  28. 28. ‫3.1 תוכן הניתן להתאמה (תגיות נכונות וסמנטיות, הפרדת‬ ‫תוכן מעיצוב, קרבה בין אלמנטים קשורים, זיהוי כותרות‬ ‫ורשימות)‬ ‫‪www.isoc.org.il‬‬ ‫‪www.w3c.org.il‬‬ ‫37 82‬ ‫‪eyal@isoc.org.il‬‬
  29. 29. ‫6. הפרידו תוכן מעיצוב‬ ‫אותו אתר,‬ ‫ללא ‪CSS‬‬ ‫• ‪ HTML‬לתוכן‬ ‫• ‪ CSS‬לעיצוב‬ ‫דוגמא...‬ ‫• עיצוב ללא טבלאות‬ ‫321‪j.mp/dkrg‬‬ ‫‪www.isoc.org.il‬‬ ‫‪www.w3c.org.il‬‬ ‫37 92‬ ‫‪eyal@isoc.org.il‬‬
  30. 30. ‫דוגמא – שינוי עיצוב‬ csszengarden.com standards.co.il www.isoc.org.il www.w3c.org.il 30 73 eyal@isoc.org.il
  31. 31. ‫אלמנטים סמנטיים‬ ‫כותרות‬ - ‫רשימות‬ - ‫הדגשה‬ - ... - www.isoc.org.il www.w3c.org.il 31 73 eyal@isoc.org.il
  32. 32. ‫תגיות – העברת משמעות רק בעיצוב‬ ‫‪www.w3c.org.il‬‬
  33. 33. ...CSS ‫בלי‬ www.w3c.org.il
  34. 34. ?‫פתרון‬ j.mp/w3il61 www.w3c.org.il
  35. 35. ‫4.1 בר הבחנה (הפרדת חזית מרקע – אי שימוש בצבע בלבד‬ ‫למשמעות, גודל אותיות בר הגדלה, אי שימוש בתמונה כטקסט,‬ ‫ניגודיות)‬ ‫‪www.isoc.org.il‬‬ ‫‪www.w3c.org.il‬‬ ‫37 53‬ ‫‪eyal@isoc.org.il‬‬
  36. 36. ‫שימוש בצבע‬ ‫הדגישו גם באמצעות עיבוי, הוספת מסגרת, 1שינוי רקע‬ ‫8‪j.mp/w3ad‬‬ ‫‪www.isoc.org.il‬‬ ‫‪www.w3c.org.il‬‬ ‫37 63‬ ‫‪eyal@isoc.org.il‬‬
  37. 37. ‫ניגוד-צבעים‬ ‫יחס-ניגוד של לפחות 1:5.4‬ ‫כי קשה לקרוא כאשר אין מספיק‬ ‫ניגודיות‬ ‫)השתמשו בבודק ניגודיות: 9‪)j.mp/w3ad‬‬ ‫75‪j.mp/w3il‬‬ ‫‪www.isoc.org.il‬‬ ‫‪www.w3c.org.il‬‬ ‫37 73‬ ‫‪eyal@isoc.org.il‬‬
  38. 38. ‫עקרון 2: ניתן להפעלה‬ ‫המרכיבים והניווט ניתנים להפעלה.‬ ‫‪www.isoc.org.il‬‬ ‫‪www.w3c.org.il‬‬ ‫37 83‬ ‫‪eyal@isoc.org.il‬‬
  39. 39. ‫1.2 תפקוד מלא ממקלדת (הגעה לכל הניווט, אין מלכודות‬ ‫מקלדת)‬ ‫‪www.isoc.org.il‬‬ ‫‪www.w3c.org.il‬‬ ‫37 93‬ ‫‪eyal@isoc.org.il‬‬
  40. 40. ‫ מקבילים‬event handlers-‫השתמשו ב‬ j.mp/w3il54 www.isoc.org.il www.w3c.org.il 40 73 eyal@isoc.org.il
  41. 41. )‫אין תמיכה מלאה במקלדת (בתפריט עליון‬ whitehouse.gov www.isoc.org.il www.w3c.org.il 41 73 eyal@isoc.org.il
  42. 42. ‫ספקו חלופה לגרירה‬ ‫מצב נגישות בוורדפרס‬ j.mp/w3il55 www.isoc.org.il www.w3c.org.il 42 73 eyal@isoc.org.il
  43. 43. ‫2.2 מספיק זמן (הזהרה מפני סיום ‪ ,session‬אפשרות‬ ‫הארכה, עצירת תנועה ואיתחולה, עצירת עדכונים, אי הקצבת‬ ‫זמן לפעולה (אם אפשר) )‬ ‫‪www.isoc.org.il‬‬ ‫‪www.w3c.org.il‬‬ ‫37 34‬ ‫‪eyal@isoc.org.il‬‬
  44. 44. ‫שליטה בעדכון אוטומטי‬ downrightnow.com www.isoc.org.il www.w3c.org.il 44 73 eyal@isoc.org.il
  45. 45. ‫שמירת מידע בטופס בכדי אם נדרש אימות המשתמש‬ ‫) לפני הגשתו‬authentication( www.isoc.org.il www.w3c.org.il 45 73 eyal@isoc.org.il
  46. 46. ‫3.2 מניעת התקפים (עצירת תזוזה, מנעת הבהובים וחלקים‬ ‫זזים)‬ ‫‪www.isoc.org.il‬‬ ‫‪www.w3c.org.il‬‬ ‫37 64‬ ‫‪eyal@isoc.org.il‬‬
  47. 47. In 1997, a cartoon on television in Japan sent over 700 children to the hospital, including about 500 who had seizures j.mp/w3il56 www.isoc.org.il www.w3c.org.il 47 73 eyal@isoc.org.il
  48. 48. ‫- לא יותר מ-3 הבהובים בשניה (או שאינו עובר את הסף)‬ ‫- איזורים מהבהבים - קטנים‬ ‫‪www.isoc.org.il‬‬ ‫‪www.w3c.org.il‬‬ ‫37 84‬ ‫‪eyal@isoc.org.il‬‬
  49. 49. ‫4.2 קלות ניווט ומציאת מידע (מספר דרכים לאותו תוכן,‬ ‫דפים מובנים עם כותרות נכונות, קישורים ברורים, עקיפת‬ ‫בלוקים החוזרים על עצמם, סדר פוקוס נכון, פוקוס נראה לעין)‬ ‫‪www.isoc.org.il‬‬ ‫‪www.w3c.org.il‬‬ ‫37 94‬ ‫‪eyal@isoc.org.il‬‬
  50. 50. )‫קישור ישיר לתוכן (גלוי או מוסתר‬ nagish.org.il www.isoc.org.il www.w3c.org.il 50 73 eyal@isoc.org.il
  51. 51. ‫ – מייד לאחר האלמנט‬DOM-‫• הכנסת תוכן דינמי ל‬ ‫המפעיל‬ www.isoc.org.il www.w3c.org.il 51 73 eyal@isoc.org.il
  52. 52. ‫קישורים ברורים ודילוג לתוכן‬ a span.hide { height: 1px; width: 1px; position: absolute; overflow: hidden; top: -10px; } www.isoc.org.il www.w3c.org.il 52 73 eyal@isoc.org.il
  53. 53. ?‫ בתגובות בוורדפרס‬tabindex ‫למה יש‬ www.isoc.org.il www.w3c.org.il 53 73 eyal@isoc.org.il
  54. 54. ‫• השתמשו בפירורי לחם‬ ‫• מפת אתר‬ www.isoc.org.il www.w3c.org.il 54 73 eyal@isoc.org.il
  55. 55. ‫עקרון 3: ניתן להבנה‬ ‫הטקסט ניתן לקראה ולהבנה‬ www.isoc.org.il www.w3c.org.il 55 73 eyal@isoc.org.il
  56. 56. ‫1.3 טקסט בר הבנה (רמת הטקסט, זיהוי השפה בדף כולו‬ ‫ובחלקיו, פירוש קיצורים וז'רגון)‬ ‫‪www.isoc.org.il‬‬ ‫‪www.w3c.org.il‬‬ ‫37 65‬ ‫‪eyal@isoc.org.il‬‬
  57. 57. ‫זיהוי שפת הטקסט‬ <html lang="fr"> <html xml:lang="he”> www.isoc.org.il www.w3c.org.il 57 73 eyal@isoc.org.il
  58. 58. ‫הרחבת קיצורים‬ <p>Tasini <abbr title="and others">et al.</abbr> <abbr title="versus">v.</abbr> The New York Times www.isoc.org.il www.w3c.org.il 58 73 eyal@isoc.org.il
  59. 59. ‫2.3 תפעול ותצוגה צפויים (אי שינוי ההקשר בפוקוס או בלי‬ ‫שהמשתמש ביקש, ניווט עקבי)‬ ‫‪www.isoc.org.il‬‬ ‫‪www.w3c.org.il‬‬ ‫37 95‬ ‫‪eyal@isoc.org.il‬‬
  60. 60. ‫לא לשנות את העמוד באופן משמעותי בגלל פוקוס‬ ‫על אלמנט‬ ‫‪w3c.org‬‬ ‫‪www.w3c.org.il‬‬ ‫06‬
  61. 61. ‫3.3 תמיכה בהזנה (הסבר מדויק לטעיות, הסבר על מה צריך‬ ‫להזין, ולידציה, טקסט עזרה)‬ ‫(בנייה חכמה של טפסים)‬ ‫‪www.isoc.org.il‬‬ ‫‪www.w3c.org.il‬‬ ‫37 16‬ ‫‪eyal@isoc.org.il‬‬
  62. 62. ‫דרכי מניעת טעויות בטפסים‬ • Confirmed (review) • Checked ( for input errors ) • Reversible www.isoc.org.il www.w3c.org.il 62 73 eyal@isoc.org.il
  63. 63. ‫עקרון 4 - יציבות‬ ‫תאימות מרבית עם דפדפנים, תוכנות וכדומה‬ ‫‪www.isoc.org.il‬‬ ‫‪www.w3c.org.il‬‬ ‫37 36‬ ‫‪eyal@isoc.org.il‬‬
  64. 64. ‫ (תג פתיחה וסגירה, קינון נכון, אי כפילות‬Parsing 4.1 )IDs are unique ,attributes ‫לכתוב קוד תקין‬ www.isoc.org.il www.w3c.org.il 64 73 eyal@isoc.org.il
  65. 65. CSS-‫ וה‬HTML-‫בדקו את תקינות ה‬ validator.w3.org - HTML ‫• בודק תקינות‬ j.mp/w3add1 - CSS ‫• בודק תקינות‬ ...‫דוגמא‬ www.isoc.org.il www.w3c.org.il 65 73 eyal@isoc.org.il
  66. 66. )‫2.4 שם-תפקיד-ערך (שימוש בפקדים רגילים פותר את זה‬ www.isoc.org.il www.w3c.org.il 66 73 eyal@isoc.org.il
  67. 67. :‫לדוגמה‬ checkbox ‫זהו‬ "‫שמֹו: "קראתי את תנאי השימוש‬ְׁ ."‫מצבו: "לא מסומן‬ <input type="checkbox" id="markuplang" name="computerskills" checked="checked“ /> <label for="markuplang"> ‫קראתי את תנאי‬ ‫/<השימוש‬label> j.mp/w3addd www.isoc.org.il www.w3c.org.il 67 73 eyal@isoc.org.il
  68. 68. :‫השתמשו ב‬ createElement() createTextNode() appendChild() :‫ולא ב‬ object.innerHTML document.write : j.mp/w3il58 www.isoc.org.il www.w3c.org.il 68 73 eyal@isoc.org.il
  69. 69. Java accessiblity - j.mp/w3il59 Flash accessibility - j.mp/w3il60 www.isoc.org.il www.w3c.org.il 69 73 eyal@isoc.org.il
  70. 70. ‫עזרה‬ accessifyforum.com www.isoc.org.il www.w3c.org.il 70 73 eyal@isoc.org.il
  71. 71. ?‫איך מתחילים‬ www.isoc.org.il www.w3c.org.il 71 73 eyal@isoc.org.il
  72. 72. ‫1. קראו את 0.2 ‪( WCAG‬בעברית)‬ ‫2. שימרו את הכלים מהמצגת – קרובים‬ ‫(3. הרשמו למקורות מידע)‬ ‫4. בזמן התכנון והפיתוח – היו בקרותיים וחישבו על‬ ‫נגישות‬ ‫‪www.isoc.org.il‬‬ ‫‪www.w3c.org.il‬‬ ‫37 27‬ ‫‪eyal@isoc.org.il‬‬
  73. 73. !‫צרו קשר‬ ‫אייל סלע‬ eyal@isoc.org.il @isociltech @eyalsela www.isoc.org.il www.w3c.org.il 73 73 eyal@isoc.org.il

×