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