View
28
Download
9
Embed Size (px)
DESCRIPTION
Citation preview
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
תצוגה •
הזנת תוכן•
רוחב פס ועלות •
מטרות המשתמש•
מגבלות המכשיר•
מכשירים ניידים לעומת שולחניים–מגבלות והבדלים
cmbp3bit.ly/w
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
מדדי הצלחה
))
שיטות
ada3j.mp/w
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.CAPTCHA)חלופה ל, פקדים בטפסים, תיאור תמונה)
50il3j.mp/w
33 / 116
חסר משמעות altטקסט: לא נגיש
33
34 / 116
טקסט חלופי: נגיש
35 / 11635
www.google.com/recaptcha
ראיה
שמיעה
36 / 116
–תוכן בלתי־נראה, עיצוב, קישוט
יכולה להתעלם ממנו טכנולוגיה מסייעתבאופן ש
36
37 / 116
זמן-חלופות עבור מדיה מבוססת 2.תיאורים כתובים של צלילים , או קול, כתוביות לוידאו)
(תיאורי אודיו למידע חזותי משמעותי, משמעותיים
38 / 116
Universal Subtitles :נגיש
universalsubtitles.org
39 / 116
אין תמלול לפודקסט: לא נגיש
O7m65bit.ly/f
40 / 116
תוכן הניתן להתאמה 3.קרבה בין , הפרדת תוכן מעיצוב, תגיות נכונות וסמנטיות)
(זיהוי כותרות ורשימות, אלמנטים קשורים
41 / 116
שינוי עיצוב–דוגמא : נגיש
standards.co.il csszengarden.com
42 / 116
הדרכה בהבנת תוכן ובהפעלתו לא תסתמך רק על
, כגון צורה, המאפיינים החושיים של מרכיבים.כיוון או צליל, מיקום חזותי, גודל
42
43 / 116
:המנעו מ"....בצד ימיןהקטגוריות ש"
....כפתור העגוללחצו על ה"
43
44 / 116
בר הבחנה 4., אי שימוש בצבע בלבד למשמעות–הפרדת חזית מרקע )
, אי שימוש בתמונה כטקסט, גודל אותיות בר הגדלה(ניגודיות
45 / 116
שימוש בצבע
1 ,,עיבויהדגישו גם באמצעות
8ad3j.mp/w
שינוי רקעהוספת מסגרת
46 / 116
שימוש בצבע בלבד להבעת משמעות: לא נגיש
kavhutz.wordpress.com
47 / 116
צבעים-ניגוד4.5:1ניגוד של לפחות -יחס
(j.mp/cont123, j.mp/w3ad9 השתמשו בבודק ניגודיות: )
כי קשה לקרוא כאשר אין מספיק ניגודיות
48 / 116
ניגודיות נמוכה בכותרת :לא נגיש
CQh26bit.ly/h
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
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-לא יותר מ-
(הסף
קטנים -איזורים מהבהבים -
66 / 116
גדול, צבעוני, הרבה תנועה: לא נגיש
13885it.themarker.com/tmit/article/
69 / 116
קלות ניווט ומציאת מידע 2.4, דפים מובנים עם כותרות נכונות, מספר דרכים לאותו תוכן)
סדר , עקיפת בלוקים החוזרים על עצמם, קישורים ברורים
(פוקוס נכון
70 / 116
(גלוי או מוסתר)קישור ישיר לתוכן : נגיש
nagish.org.il
71 / 116
השתמשו בפירורי לחם: נגיש
education.gov.il
75 / 116
ניתן להבנה :3עקרון הטקסט ניתן לקראה ולהבנה
the content or operation cannot be
beyond their understanding
76 / 116
טקסט בר הבנה 3.1פירוש קיצורים , זיהוי השפה בדף כולו ובחלקיו, רמת הטקסט)
(רגון'וז
77 / 116
(למעט טקסט משפטי)
78 / 116
תפעול ותצוגה צפויים 2.ניווט , אי שינוי ההקשר בפוקוס או בלי שהמשתמש ביקש)
(עקבי
80 / 116
תמיכה בהזנה 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-בדקו את תקינות ה org3validator.w-HTML.בודק תקינות•
CSS-1add3j.mp/wבודק תקינות•
89 / 116
WAI-ARIA…
90 / 116
לסיכום
90
91 / 116
ונגישים... אתרים יפים
nomensa.comaccessibleculture.org copious.co.uk
92 / 116
טיפים לאתר איכותי
יועץ•
מפורטאפיון•
:בבקיאשהמבצעלוודא•
נגישות•
ותקניאיכותיקודכתיבת•
שימושיות•
אמין ,יפהעיצוב•
ממשתמשים ,מהסביבה–משוב•
.תוכן-כמובן•
!(ייתכן ואתר קטן ופשוט יספיק. תקציב וצורך, כמובן שזה תלוי בהיקף)