Contenu connexe Similaire à אתרי אינטרנט – נגישות, התאמה למכשירים ניידים ופלטפורמות Similaire à אתרי אינטרנט – נגישות, התאמה למכשירים ניידים ופלטפורמות (20) Plus de Israeli Internet Association technology committee Plus de Israeli Internet Association technology committee (16) אתרי אינטרנט – נגישות, התאמה למכשירים ניידים ופלטפורמות1. 1102/4/82
אתרי אינטרנט – נגישות, התאמה
למכשירים ניידים ופלטפורמות.
אייל סלע
מנהל פרויקטים, איגוד האינטרנט הישראלי
ומשרד ה -W3Cהישראלי
611 / 1
2. תוכנית...
• מכשירים ניידים
• פלטפורמות
ודפדפנים
• נגישות
• טיפים לאתר איכותי
611 / 2
3. הישראלי האינטרנט איגוד
שלוחת האיגוד הבינלאומי
עמותה ללא מטרת רווח
פועל לקידום האינטרנט והטמעתו בישראל כתשתית
טכנולוגית, מחקרית, חינוכית, חברתית ועסקית
611 / 3
4. W3C
• ארגון בינלאומי
• כ-053 ארגונים
• פורום ניטראלי ליצירת תקני הווב
• משימה:
להוביל את הרשת למיצוי הפוטנציאל על ידי פיתוח
פרוטוקולים וקווים מנחים שיאפשרו את צמיחתה לטווח
ארוך.
4
611 / 4
6. Mobile vs deskop internt user
projection 2007-2015
j.mp/dsafaa Source: thenextweb.com 6
6 / 116
8. גרסה לניידים של האתר
-מבקרים ממכשירים ניידים מופנים אוטמטית לגרסה
המתאימה למכשירים ניידים
)או אפליקציה? – שיקולים...(
611 / 8
9. מגבלות והבדלים – מכשירים ניידים לעומת שולחניים
• תצוגה
• הזנת תוכן
• רוחב פס ועלות
• מטרות המשתמש
• מגבלות המכשיר
bit.ly/w3cmbp
9
10. דוגמא – גרסה רגילה לעומת לניידים
''law.co.il
law.co.il
611 / 01
11. דוגמא – גרסה רגילה לעומת לניידים
'חורים ברשת'
holesinthenet.co.il
611 / 11
13. זול - יקר?
תלוי בפלטפורמה ובמורכבות האתר.
)בוורדפרס למשל מדובר בתוסף בלבד(
611 / 31
14. כדאי?
תלוי....
כמות הקהל
סוג העסק/שירות
עד כמה יועיל?
הסתכלות לשנים הקרובות
611 / 41
18. פלטפורמות חופשיות לבניית אתרים
- וורדפרס
- דרופל
- ג'ומלה
- ...
שיקולים...
- עלות
- נעילה
- התאמה
611 / 81
20. מוגבלויות המשפיעות על השימוש
באינטרנט:
(קוראי מסך, ברייל) עיוורון
ראייה לקויה (מגדילי מסך)
עיוורון צבעים
שמיעה
קוגניציה
מוטוריקה (עזרי ניווט, אי שימוש בעכבר)
611 / 02
21. מהו אתר נגיש?
אתר המאפשר לאנשים עם מוגבלות לגלוש באותה
רמה של יעילות והנאה ככל הגולשים.
611 / 12
22. נגישות זה גם....
( ROIיותר קהל, יותר מצליחים להשתמש)
( SEOפשוט ככה)
שימושיות (תת קבוצה)
( Mobileיש חפיפה בין צרכי המשתמשים)
מקצועיות (מרגישים את ההבדל)
חוק (בקרוב...)
שוק מתרחב (עלייה בתוחלת החיים)
611 / 22
26. 4עקרונות
21קווים מנחים
מדדי הצלחה
))
שיטות
j.mp/w3ada
611 / 62
28. תקן ישראלי
בהכנה במכון התקנים •
ביקורת הציבור – 1102 •
מבוסס על0.2 WCAG •
התאמה לסביבה הישראלית •
611 / 82
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. עקרון 1: נתפס
ניתן 'לתפוס' מבחינה חושית
.(את תוכן האתרperceive)
it can't be invisible to all of their senses
31 / 116
32. 1.חלופה טקסטואלית
(תיאור תמונה, פקדים בטפסים, חלופה ל(CAPTCHA
05j.mp/w3il
611 / 23
35. ראיה
שמיעה
www.google.com/recaptcha
35
35 / 116
36. קישוט, עיצוב, תוכן בלתי־נראה–
באופן שטכנולוגיה מסייעת יכולה להתעלם ממנו
63
611 / 63
37. 2.חלופות עבור מדיה מבוססת-זמן
(כתוביות לוידאו, או קול, תיאורים כתובים של צלילים
משמעותיים, תיאורי אודיו למידע חזותי משמעותי)
611 / 73
41. נגיש: דוגמא – שינוי עיצוב
standards.co.il csszengarden.com
41 / 116
42. הדרכה בהבנת תוכן ובהפעלתו לא תסתמך רק על
המאפיינים החושיים של מרכיבים, כגון צורה,
גודל, מיקום חזותי, כיוון או צליל.
24
611 / 24
43. המנעו מ:
"הקטגוריות שבצד ימין"....
"לחצו על הכפתור העגול ....
34
611 / 34
44. 4.בר הבחנה
(הפרדת חזית מרקע – אי שימוש בצבע בלבד למשמעות,
גודל אותיות בר הגדלה, אי שימוש בתמונה כטקסט,
ניגודיות)
611 / 44
46. לא נגיש: שימוש בצבע בלבד להבעת משמעות
kavhutz.wordpress.com 611 / 64
47. ניגוד-צבעים
יחס-ניגוד של לפחות 1:5.4
כי קשה לקרוא כאשר אין מספיק
ניגודיות
) :השתמשו בבודק ניגודיות 9(j.mp/cont123, j.mp/w3ad
611 / 74
52. שליטה בשמע: אם יש מוסיקה אוטומטי (ליותר מ-3
שניות) – ניתן להפסיק /להחליש
611 / 25
53. עקרון 2: ניתן להפעלה
.המרכיבים והניווט ניתנים להפעלה
the interface cannot require
interaction that a user cannot
perform
53 / 116
55. לא נגיש: במעבר מקלדת – אי אפשר
לראות איפה הפוקוס
businessinsider.com 611 / 55
57. לא נגיש: אין תמיכה מלאה במקלדת
בתפריט עליון
whitehouse.gov 611 / 75
59. 2.2מספיק זמן
(הזהרה מפני סיום , sessionאפשרות הארכה, עצירת תנועה
ואיתחולה, עצירת עדכונים, אי הקצבת זמן לפעולה (אם אפשר(
611 / 95
61. שמירת מידע בטופס בכדי אם נדרש אימות המשתמש
)(authenticationלפני הגשתו
611 / 16
64. - לא יותר מ-3 הבהובים בשניה (או שאינו עובר את
הסף)
- איזורים מהבהבים - קטנים
611 / 46
66. לא נגיש: הרבה תנועה, צבעוני, גדול
it.themarker.com/tmit/article/13885
66 / 116
69. 4.2 קלות ניווט ומציאת מידע
(מספר דרכים לאותו תוכן, דפים מובנים עם כותרות נכונות,
קישורים ברורים, עקיפת בלוקים החוזרים על עצמם, סדר
פוקוס נכון)
611 / 96
72. נגיש:
מפת אתר
coi.gov.uk
611 / 27
73. טקסט בעל משמעות בקישורים
Xלקריאת התוכנית המלאה לחץ
כאן
קראו את התוכנית המלאה V
611 / 37
75. עקרון 3: ניתן להבנה
הטקסט ניתן לקראה ולהבנה
the content or operation cannot be
beyond their understanding
75 / 116
76. 1.3 טקסט בר הבנה
(רמת הטקסט, זיהוי השפה בדף כולו ובחלקיו, פירוש קיצורים
וז'רגון)
611 / 67
81. דרכי מניעת טעויות בטפסים
• הפיכּות - ניתן לבטל הפעולה
• אישור - תצוגה מקדימה
• בדיקה – בדיקת הערכים שהוזנו
611 / 18
84. נגיש: עזרה בעת זיהוי טעות בטופס
הצעת תיקון אפשרי
los.direct.gov.uk
611 / 48
85. עזרה
- קישור לטקסט עזרה
- הצגת דוגמאות לערכים נכונים
611 / 58
86. עקרון 4 - יציבות
תאימות מרבית עם דפדפנים, תוכנות וכדומה
as technologies and user agents
evolve, the content should remain
accessible
86 / 116
88. בדקו את תקינות ה -HTMLוה-CSS
• בודק תקינותHTML - validator.w3.org
• בודק תקינותj.mp/w3add1 - CSS
611 / 88
92. טיפים לאתר איכותי
(כמובן שזה תלוי בהיקף, תקציב וצורך. ייתכן ואתר קטן ופשוט יספיק!)
יועץ •
אפיון מפורט •
לוודא שהמבצע בקיא ב: •
• נגישות
• כתיבת קוד איכותי ותקני
• שימושיות
עיצוב יפה ,אמין •
משוב –מהסביבה ,ממשתמשים •
כמובן -תוכן. •
611 / 29
93. !צרו קשר
אייל סלע
eyal@isoc.org.il
@isociltech @eyalsela
: המצגת
93 / 116