Page 1
1 / 116
אתרי אינטרנט – נגישות, התאמה למכשירים ניידים ופלטפורמות.
אייל סלע
מנהל פרויקטים, איגוד האינטרנט הישראלי W3C-הישראלי ומשרד ה
28/4/2011
Page 2
2 / 116
...תוכנית
מכשירים ניידים•פלטפורמות •
ודפדפניםנגישות•טיפים לאתר איכותי•
Page 3
3 / 116
הישראלי האינטרנט איגודשלוחת האיגוד הבינלאומי
עמותה ללא מטרת רווח
פועל לקידום האינטרנט והטמעתו בישראל כתשתית טכנולוגית, מחקרית, חינוכית, חברתית
ועסקית
Page 4
4 / 1164
W3C
ארגון בינלאומי•
ארגונים350כ-•
פורום ניטראלי ליצירת תקני הווב•
:משימה•להוביל את הרשת למיצוי הפוטנציאל על ידי פיתוח פרוטוקולים וקווים מנחים שיאפשרו את צמיחתה
.לטווח ארוך
Page 5
5 / 116
מכשירים ניידים
Page 6
6 / 116
Mobile vs deskop internt user projection 2007-2015
j.mp/dsafaa 6Source: thenextweb.com
Page 7
7 / 116
Smartphone market share - Q1 2010
bit.ly/h755vK 7
(Q1 ’10:23% of mobile consumers have a smartphone)
Page 8
8 / 116
גרסה לניידים של האתר
מבקרים ממכשירים ניידים מופנים אוטמטית - לגרסה המתאימה למכשירים ניידים
(...או אפליקציה? – שיקולים)
Page 9
9
תצוגה•הזנת תוכן • רוחב פס ועלות•מטרות המשתמש •מגבלות המכשיר •
מגבלות והבדלים – מכשירים ניידים לעומת שולחניים
bit.ly/w3cmbp
Page 10
10 / 116
דוגמא – גרסה רגילה לעומת לניידים
'law.co.il'
law.co.il
Page 11
11 / 116
דוגמא – גרסה רגילה לעומת לניידים
'חורים ברשת'
holesinthenet.co.il
Page 12
12 / 116
כנס שנתי
isoc.org.il/conf2011/mobile12
Page 13
13 / 116
?זול - יקר
.תלוי בפלטפורמה ובמורכבות האתר(בוורדפרס למשל מדובר בתוסף בלבד)
Page 14
14 / 116
?כדאי
....תלויכמות הקהל
סוג העסק/שירות?עד כמה יועיל
הסתכלות לשנים הקרובות
Page 15
15 / 116
פלטפורמות ודפדפנים
Page 16
16 / 116
התאמת האתר לדפדפנים שונים
Page 17
17 / 116
באילו דפדפנים משתמשים ?בישראל
http://getclicky.com: מקור הנתונים
Page 18
18 / 116
פלטפורמות חופשיות לבניית אתרים
- וורדפרסדרופל-ג'ומלה--...
שיקולים...עלות-נעילה-התאמה-
Page 20
20 / 116
השימוש על המשפיעות מוגבלויות:באינטרנט
(קוראי מסך, ברייל) עיוורון
(מגדילי מסך)ראייה לקויה
עיוורון צבעים
שמיעה
קוגניציה(עזרי ניווט, אי שימוש בעכבר) מוטוריקה
Page 21
21 / 116
?נגיש אתר מהו
לגלוש מוגבלות עם לאנשים המאפשר אתר.הגולשים ככל והנאה יעילות של רמה באותה
Page 22
22 / 116
....נגישות זה גם
ROI)יותר קהל, יותר מצליחים להשתמש(
SEO)פשוט ככה(
)תת קבוצה(שימושיות
Mobile)יש חפיפה בין צרכי המשתמשים(
)מרגישים את ההבדל(מקצועיות
)בקרוב...(חוק
)עלייה בתוחלת החיים(שוק מתרחב
Page 23
23 / 116
...אה כן
אנשים
Page 24
24 / 116
?על מה אנחנו מדברים
Page 25
25 / 116
(WCAG 2.0 )הנחיות להנגשת תכני אתרי אינטרנט
j.mp/w3av2
Page 26
26 / 116
עקרונות 4
קווים מנחים 12
מדדי הצלחה
(
שיטותj.mp/w3ada
Page 27
27 / 116
A, AA, AAA שלוש רמות נגישות
Page 28
28 / 116
תקן ישראלי
בהכנה במכון התקנים•
2011ביקורת הציבור – •
WCAG 2.0 מבוסס על•התאמה לסביבה הישראלית•
Page 29
29 / 116
WCAG 2.0הקווים המנחים 12
29
Page 30
30 / 116
הקווים המנחים 12תפיסה. 1
חלופה טקסטואלית 1.1
מדיה מבוססת־זמן 1.2
גמישות 1.3
הבחנה 1.4
תפעול. 2נגישות מהמקלדת 2.1
משך־זמן מספיק 2.2
מניעת התקפים אפילפטיים 2.3
ניווט נוח 2.4
נהירּות. 3קריאּות 3.1
תפקוד באופן צפוי 3.2
עזרה בהזנת קלט 3.3
יציבות. 4תאימּות 4.1
Page 31
31 / 116
: נתפס1עקרון
ניתן 'לתפוס' מבחינה חושית)perceive (את תוכן האתר.
it can't be invisible to all of their senses
Page 32
32 / 116
1 חלופה טקסטואלית 1.
(תיאור תמונה, פקדים בטפסים, חלופה CAPTCHA(ל
j.mp/w3il50
Page 33
33 / 116
חסר משמעות alt טקסטלא נגיש:
33
Page 34
34 / 116
טקסט חלופינגיש:
Page 35
35 / 11635
www.google.com/recaptcha
ראיה
שמיעה
Page 36
36 / 116
–קישוט, עיצוב, תוכן בלתי־נראה
יכולה להתעלם טכנולוגיה מסייעתבאופן שממנו
36
Page 37
37 / 116
1חלופות עבור מדיה מבוססת-זמן 2.
כתוביות לוידאו, או קול, תיאורים כתובים של צלילים )משמעותיים, תיאורי אודיו למידע חזותי משמעותי)
Page 38
38 / 116
Universal Subtitles: נגיש
universalsubtitles.org
Page 39
39 / 116
אין תמלול לפודקסטלא נגיש:
bit.ly/f65m7O
Page 40
40 / 116
1תוכן הניתן להתאמה 3.
תגיות נכונות וסמנטיות, הפרדת תוכן מעיצוב, קרבה )בין אלמנטים קשורים, זיהוי כותרות ורשימות)
Page 41
41 / 116
דוגמא – שינוי עיצובנגיש:
standards.co.il csszengarden.com
Page 42
42 / 116
הדרכה בהבנת תוכן ובהפעלתו לא תסתמך המאפיינים החושיים של מרכיבים, רק על
.כגון צורה, גודל, מיקום חזותי, כיוון או צליל
42
Page 43
43 / 116
:המנעו מ ...."בצד ימיןהקטגוריות ש"
.... כפתור העגוללחצו על ה"
43
Page 44
44 / 116
1בר הבחנה 4.
(הפרדת חזית מרקע – אי שימוש בצבע בלבד למשמעות, גודל אותיות בר הגדלה, אי שימוש בתמונה
כטקסט, ניגודיות)
Page 45
45 / 116
שימוש בצבע
1 , ,עיבויהדגישו גם באמצעות
j.mp/w3ad8
שינוי רקעהוספת מסגרת
Page 46
46 / 116
שימוש בצבע בלבד להבעת לא נגיש: משמעות
kavhutz.wordpress.com
Page 47
47 / 116
ניגוד-צבעים4.5:1יחס-ניגוד של לפחות
(j.mp/cont123, j.mp/w3ad9 השתמשו בבודק( :ניגודיות
כי קשה לקרוא כאשר אין מספיק ניגודיות
Page 48
48 / 116
ניגודיות נמוכה בכותרתלא נגיש:
bit.ly/h26CQh
Page 49
49 / 116
כפתור לשינוי הניגודיות באתרנגיש:
nptech.org.il
Page 50
50 / 116
כפתורים לשינוי הניגודיות וגודל נגיש: הטקסט
j.mp/accessbb
Page 51
51 / 116
אפשרות להגדלת הטקסטנגיש:
guardian.co.uk
Page 52
52 / 116
אם יש מוסיקה אוטומטי (ליותר שליטה בשמע: שניות) – ניתן להפסיק /להחליש3מ-
Page 53
53 / 116
: ניתן להפעלה2עקרון .המרכיבים והניווט ניתנים להפעלה
the interface cannot require interaction that a user cannot perform
Page 54
54 / 116
תפקוד מלא ממקלדת 2.1(הגעה לכל הניווט, אין מלכודות מקלדת)
Page 55
55 / 116
במעבר מקלדת – אי אפשר לא נגיש: לראות איפה הפוקוס
businessinsider.com
Page 56
56 / 116
פוקוס נראה לעיןנגיש:
accessibletwitter.com
Page 57
57 / 116
אין תמיכה מלאה במקלדת לא נגיש: בתפריט עליון
whitehouse.gov
Page 58
58 / 116
גישה לניווט באמצעות המקלדתנגיש:
nagish.org.il
Page 59
59 / 116
מספיק זמן 2.2אפשרות הארכה, עצירת , session הזהרה מפני סיום)
תנועה ואיתחולה, עצירת עדכונים, אי הקצבת זמן (לפעולה (אם אפשר
Page 60
60 / 116
שליטה בעדכון אוטומטינגיש:
downrightnow.com
Page 61
61 / 116
שמירת מידע בטופס בכדי אם נדרש אימות לפני הגשתו) authentication (המשתמש
Page 62
62 / 116
בשירותים מקוונים session-הארכת השל הבנק
Page 63
63 / 116
מניעת התקפים 2.3(עצירת תזוזה, מנעת הבהובים וחלקים זזים)
Page 64
64 / 116
הבהובים בשניה (או שאינו עובר 3לא יותר מ--את הסף)
איזורים מהבהבים - קטנים-
Page 65
65 / 116
סמל מהבהב – מעט ולא בולטנגיש:
gov.il
Page 66
66 / 116
הרבה תנועה, צבעוני, גדוללא נגיש:
it.themarker.com/tmit/article/13885
Page 67
67 / 116
כפתור עצירת תנועהנגיש:
www.leumi.co.il
Page 68
68 / 116
כפתור עצירת תנועהנגיש:
nagish.org.il
Page 69
69 / 116
קלות ניווט ומציאת מידע 2.4 (מספר דרכים לאותו תוכן, דפים מובנים עם כותרות
נכונות, קישורים ברורים, עקיפת בלוקים החוזרים על עצמם, סדר פוקוס נכון)
Page 70
70 / 116
קישור ישיר לתוכן )גלוי או נגיש: מוסתר(
nagish.org.il
Page 71
71 / 116
השתמשו בפירורי לחםנגיש:
education.gov.il
Page 72
72 / 116
:נגישמפת אתר
coi.gov.uk
Page 73
73 / 116
טקסט בעל משמעות בקישורים
X לקריאת התוכנית המלאה לחץ כאן
V התוכנית המלאה קראו את
Page 74
74 / 116
....כותרות ברורותנגיש:
j.mp/ackdivs
Page 75
75 / 116
: ניתן להבנה3עקרון הטקסט ניתן לקראה ולהבנה
the content or operation cannot be beyond their understanding
Page 76
76 / 116
3 טקסט בר הבנה 3.1
רמת הטקסט, זיהוי השפה בדף כולו ובחלקיו, פירוש )קיצורים וז'רגון)
Page 77
77 / 116
(למעט טקסט משפטי)
Page 78
78 / 116
3תפעול ותצוגה צפויים 2.
(אי שינוי ההקשר בפוקוס או בלי שהמשתמש ביקש, ניווט עקבי)
Page 79
79 / 116
איבוד פוקוס בניווט מקלדתלא נגיש:
ustream.tv
Page 80
80 / 116
3תמיכה בהזנה 3.
הסבר מדויק לטעיות, הסבר על מה צריך להזין, )ולידציה, טקסט עזרה)
)בנייה חכמה של טפסים
Page 81
81 / 116
דרכי מניעת טעויות בטפסים
- ניתן לבטל הפעולההפיכּות •תצוגה מקדימהאישור - •
בדיקת הערכים שהוזנו– בדיקה•
Page 82
82 / 116
:נגיש
www.data.gov.uk/user/register
Page 83
83 / 116
זיהוי שגיאות והצגתן בראש הטופסנגיש:
farukat.es/contact/
Page 84
84 / 116
עזרה בעת זיהוי טעות בטופסנגיש:
הצעת תיקון אפשרי
los.direct.gov.uk
Page 85
85 / 116
עזרה
קישור לטקסט עזרה-הצגת דוגמאות לערכים נכונים-
Page 86
86 / 116
- יציבות4עקרון תאימות מרבית עם דפדפנים, תוכנות וכדומה
as technologies and user agents evolve, the content should remain accessible
Page 87
87 / 116
4.1 Parsing
לכתוב קוד תקין
Page 88
88 / 116
CSS-וה HTML-בדקו את תקינות הHTML - validator.w3.org בודק תקינות•j.mp/w3add1 - CSS בודק תקינות•
Page 89
89 / 116
WAI-ARIA…
Page 90
90 / 116
לסיכום
90
Page 91
91 / 116
אתרים יפים... ונגישים
nomensa.comaccessibleculture.org copious.co.uk
Page 92
92 / 116
טיפים לאתר איכותייועץ •אפיון מפורט•לוודא שהמבצע בקיא ב:•
נגישות•כתיבת קוד איכותי ותקני•שימושיות•
עיצוב יפה, אמין•משוב – מהסביבה, ממשתמשים•כמובן - תוכן.•
)כמובן שזה תלוי בהיקף, תקציב וצורך. ייתכן ואתר קטן ופשוט יספיק!(
Page 93
93 / 116
אייל סלע
[email protected] @isociltech @eyalsela
: המצגת
תודה
!צרו קשר