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

1. כלים ושיטות להנגשת אתרי אינטרנט על פי WCAG 2.0 23/2/2011 אייל סלע מנהל פרויקטים, איגוד האינטרנט הישראלי ומשרד ה-W3C הישראלי

2. תוכנית... מהי נגישות כלים 12 הקווים המנחים - WCAG 2.0 סיכום

3. איגוד האינטרנט הישראלי שלוחת האיגוד הבינלאומי עמותה ללא מטרת רווח פועל לקידום האינטרנט והטמעתו בישראל כתשתית טכנולוגית, מחקרית, חינוכית, חברתית ועסקית

4. W3C • ארגון בינלאומי • כ-350 ארגונים • פורום ניטראלי ליצירת תקני הווב • משימה: להוביל את הרשת למיצוי הפוטנציאל על ידי פיתוח פרוטוקולים וקווים מנחים שיאפשרו את צמיחתה לטווח ארוך.

5. מהינגישות

6. מוגבלויות המשפיעות על השימוש באינטרנט: עיוורון (קוראי מסך, ברייל) ראייה לקויה (מגדילי מסך) עיוורון צבעים שמיעה קוגניציה מוטוריקה(עזרי ניווט, אי שימוש בעכבר)

7. מהו אתר נגיש? אתר המאפשר לאנשים עם מוגבלות לגלוש באותה רמה של יעילות והנאה ככל הגולשים.

8. נגישות זה גם.... ROI(יותר קהל, יותר מצליחים להשתמש) SEO(פשוט ככה...) שימושיות(תת קבוצה) Mobile(יש חפיפה בין צרכי המשתמשים) מקצועיות(מרגישים את ההבדל) חוק (בקרוב...) שוק מתרחב (עלייה בתוחלת החיים)

9. אה כן... אנשים

10. על מה אנחנו מדברים?

11. הנחיות להנגשת תכני אתרי אינטרנט (WCAG) 2.0 j.mp/w3av2

12. 4 עקרונות  12 קווים מנחים  מדדי הצלחה )) שיטות j.mp/w3ada

13. שלוש רמות נגישות – A, AA, AAA

14. תקן ישראלי בהכנה במכון התקנים ביקורת הציבור – 2011 מבוסס על WCAG 2.0 התאמה לסביבה הישראלית

15. כלים

16. כלי עזר: מנוע חיפוש לאלמנטים ב-HTML, CSS דוגמא... וגם – • נגישות • Mobile • SVG j.mp/w3cmo8

17. דוגמא – חיפוש title

18. nagish.org.il

19. Techniques for WCAG 2.0 (single file) j.mp/w3il64

20. WCAG 2.0 12 הקווים המנחים

21. 12 הקווים המנחים • 3. נהירוּת • 3.1 קריאוּת • 3.2 תפקוד באופן צפוי • 3.3 עזרה בהזנת קלט 1. תפיסה 1.1 חלופה טקסטואלית 1.2 מדיה מבוססת־זמן 1.3 גמישות 1.4 הבחנה 2. תפעול 2.1 נגישות מהמקלדת 2.2 משך־זמן מספיק 2.3 מניעת התקפים אפילפטיים 2.4 ניווט נוח • 4. יציבות • 4.1 תאימוּת

22. עקרון 1: נתפס ניתן 'לתפוס' מבחינה חושית (perceive) את תוכן האתר. it can't be invisible to all of their senses

23. 1.1 חלופה טקסטואלית (תיאור תמונה, פקדים בטפסים, חלופה ל- CAPTCHA) j.mp/w3il50

24. נגיש: שימוש ב-alt <img src="newsletter.gif" alt="Free newsletter. Get free recipes, news, and more. Learn more." /> ( vs title) j.mp/w3il51

25. לא נגיש: טקסט alt חסר משמעות

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

27. נגיש: טקסט חלופי

28. ראיה שמיעה www.google.com/recaptcha

29. קישוט, עיצוב, תוכן בלתי־נראה – באופן שטכנולוגיה מסייעת יכולה להתעלם ממנו

30. 1.2 חלופות עבור מדיה מבוססת-זמן(כתוביות לוידאו, או קול, תיאורים כתובים של צלילים משמעותיים, תיאורי אודיו למידע חזותי משמעותי)

31. נגיש: Universal Subtitles universalsubtitles.org

32. לא נגיש: אין תמלול לפודקסט bit.ly/f65m7O

33. נגיש: יעוץ משפטי מבוסס וידאו - בשפת הסימנים. radlegalservices.org.uk/bsl-advice

34. 1.3 תוכן הניתן להתאמה(תגיות נכונות וסמנטיות, הפרדת תוכן מעיצוב, קרבה בין אלמנטים קשורים, זיהוי כותרות ורשימות)

35. נגיש: הפרידו תוכן מעיצוב אותו אתר, ללא CSS • HTML לתוכן • CSS לעיצוב • עיצוב ללא טבלאות j.mp/dkrg123 דוגמא...

36. נגיש: דוגמא – שינוי עיצוב csszengarden.com standards.co.il

37. נגיש: אלמנטים סמנטיים כותרות - <h1> – <h6> רשימות ותפריטים - <ul> ו <ui> פסקה - <p> הדגשה -<strong>

38. לא נגיש: שימוש לא נכון בכותרות lifehacker.com

39. נגיש: שימוש נכון בכותרות weboverhauls.com/dennislembree/

40. לא נגיש: אין כותרות Gov.il

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 we'll 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>

42. קישורים ברורים ודילוג לתוכן a span.hide { height: 1px; width: 1px; position: absolute; overflow: hidden; top: -10px; }

43. תגיות חדשות לשיפור סמנטיקה ב-HTML5 <header> <section> <footer> <nav> <article> <aside> …

44. הדרכה בהבנת תוכן ובהפעלתו לא תסתמך רק על המאפיינים החושיים של מרכיבים, כגון צורה, גודל, מיקום חזותי, כיוון או צליל.

45. לא נגיש: תגיות – העברת משמעות רק בעיצוב בלי CSS

46. המנעו מ: "הקטגוריות שבצד ימין ...." "לחצו על הכפתור העגול....

47. נגיש:מידע המועבר בצבע בלבד – נמצא גם בטקסט ומוסתר בעזרת CSS caniuse.com/datalist

48. לא נגיש: אי אפשר לדעת מה מסומן בלי CSS initializr.com

49. 1.4 בר הבחנה(הפרדת חזית מרקע – אי שימוש בצבע בלבד למשמעות, גודל אותיות בר הגדלה, אי שימוש בתמונה כטקסט, ניגודיות)

50. שימוש בצבע הדגישו גם באמצעות עיבוי, , 1 שינוי רקע הוספת מסגרת j.mp/w3ad8