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

1. 28/4/2011 אתרי אינטרנט – נגישות, התאמה למכשירים ניידים ופלטפורמות. אייל סלע מנהל פרויקטים, איגוד האינטרנט הישראלי ומשרד ה-W3C הישראלי

2. תוכנית... • מכשירים ניידים • פלטפורמות ודפדפנים • נגישות • טיפים לאתר איכותי

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

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

5. מכשירים ניידים

6. Mobile vs deskop internt user projection 2007-2015 j.mp/dsafaa 6 Source: thenextweb.com

7. Smartphone market share - Q1 2010 (Q1 ’10:23% of mobile consumers have a smartphone) bit.ly/h755vK 7

8. גרסה לניידים של האתר - מבקרים ממכשירים ניידים מופנים אוטמטית לגרסה המתאימה למכשירים ניידים (או אפליקציה? – שיקולים...)

9. מגבלות והבדלים – מכשירים ניידים לעומת שולחניים • תצוגה • הזנת תוכן • רוחב פס ועלות • מטרות המשתמש • מגבלות המכשיר bit.ly/w3cmbp

10. דוגמא – גרסה רגילה לעומת לניידים'law.co.il' law.co.il

11. דוגמא – גרסה רגילה לעומת לניידים'חורים ברשת' holesinthenet.co.il

12. כנס שנתי isoc.org.il/conf2011/mobile 12

13. זול - יקר? תלוי בפלטפורמה ובמורכבות האתר. (בוורדפרס למשל מדובר בתוסף בלבד)

14. כדאי? תלוי.... כמות הקהל סוג העסק/שירות עד כמה יועיל? הסתכלות לשנים הקרובות

15. פלטפורמות ודפדפנים

16. התאמת האתר לדפדפנים שונים

17. באילו דפדפנים משתמשים בישראל? מקור הנתונים: http://getclicky.com

18. פלטפורמות חופשיות לבניית אתרים • - וורדפרס • דרופל • ג'ומלה • ... • שיקולים... • עלות • נעילה • התאמה

19. נגישות

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

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

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

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

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

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

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

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

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

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

30. 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 תאימוּת

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

46. לא נגיש: שימוש בצבע בלבד להבעת משמעות kavhutz.wordpress.com

47. ניגוד-צבעים יחס-ניגוד של לפחות 4.5:1 כי קשה לקרוא כאשר אין מספיק ניגודיות (j.mp/cont123, j.mp/w3ad9 השתמשו בבודק ניגודיות: )

48. לא נגיש: ניגודיות נמוכה בכותרת bit.ly/h26CQh

49. נגיש: כפתור לשינוי הניגודיות באתר nptech.org.il

50. נגיש: כפתורים לשינוי הניגודיות וגודל הטקסט j.mp/accessbb