כלים ושיטות להנגשת אתרי אינטרנט
Post on 24-May-2015
20.734 Views
Preview:
DESCRIPTION
TRANSCRIPT
www.isoc.org.il
www.w3c.org.il
eyal@isoc.org.il73\
כלים ושיטות להנגשת אתרי אינטרנט
אייל סלע
איגוד האינטרנט הישראלי , מנהל פרויקטיםהישראלי W3C-ומשרד ה
1
5/9/2010
www.isoc.org.il
www.w3c.org.il
eyal@isoc.org.il73\
או
דברים שצריך לדעת על נגישות באינטרנט 12
2
www.isoc.org.il
www.w3c.org.il
eyal@isoc.org.il73\3
cdoc3j.mp/w
www.isoc.org.il
www.w3c.org.il
eyal@isoc.org.il73\
...תוכנית
מבוא•
נגישות•
כלים•
קווים מנחים 12•
איך מתחילים•
4
www.isoc.org.il
www.w3c.org.il
eyal@isoc.org.il73\
איגוד האינטרנט הישראלי: אודות
: שלוחת האיגוד הבינלאומי
עמותה ללא מטרת רווח
פועל לקידום האינטרנט והטמעתו בישראל
חברתית , חינוכית, מחקרית, כתשתית טכנולוגית
.ועסקית
5
www.isoc.org.il
www.w3c.org.il
eyal@isoc.org.il73\
W3C
ארגון בינלאומי
ארגונים 350-כ
. פורום ניטראלי ליצירת תקני רשת באינטרנט
:משימה
להוביל את הרשת למיצוי הפוטנציאל על ידי פיתוח
פרוטוקולים וקווים מנחים שיאפשרו את צמיחתה לטווח .ארוך
6
www.isoc.org.il
www.w3c.org.il
eyal@isoc.org.il73\
נגישות7
www.isoc.org.il
www.w3c.org.il
eyal@isoc.org.il73\
:מוגבלויות המשפיעות על השימוש באינטרנט
(ברייל, קוראי מסך) עיוורון
(מגדילי מסך)ראייה לקויה
עיוורון צבעים
שמיעה
קוגניציה
(אי שימוש בעכבר, עזרי ניווט) מוטוריקה
8
www.isoc.org.il
www.w3c.org.il
eyal@isoc.org.il73\
?מהו אתר נגיש
אתר המאפשר לאנשים עם מוגבלות לגלוש באותה רמה
.של יעילות והנאה ככל הגולשים
9
www.isoc.org.il
www.w3c.org.il
eyal@isoc.org.il73\
....נגישות זה גםROI (יותר מצליחים להשתמש, יותר קהל)
SEO (פשוט ככה)...
(תת קבוצה) שימושיות
Mobile (יש חפיפה בין צרכי המשתמשים)
(מרגישים את ההבדל) מקצועיות
...(בקרוב)חוק
(עלייה בתוחלת החיים)עתיד
10
www.isoc.org.il
www.w3c.org.il
eyal@isoc.org.il73\
...אה כן
אנשים
11
www.isoc.org.il
www.w3c.org.il
eyal@isoc.org.il73\
?על מה אנחנו מדברים
12
www.isoc.org.il
www.w3c.org.il
eyal@isoc.org.il73\
2.0 (WCAG)הנחיות להנגשת תכני אתרי אינטרנט
j.mp/w3av213
www.isoc.org.il
www.w3c.org.il
eyal@isoc.org.il73\
עקרונות 4
קווים מנחים 12
מדדי הצלחה
))
שיטות
ada3j.mp/w14
www.isoc.org.il
www.w3c.org.il
eyal@isoc.org.il73\
A ,AA ,AAA–שלוש רמות נגישות
15
www.isoc.org.il
www.w3c.org.il
eyal@isoc.org.il73\
כלים16
www.isoc.org.il
www.w3c.org.il
eyal@isoc.org.il73\
HTML, CSS-מנוע חיפוש לאלמנטים ב: כלי עזר
...דוגמא
8 cmo3j.mp/w17
–וגם
נגישות•
•Mobile
•SVG
www.w3c.org.il
titleחיפוש –דוגמא
www.isoc.org.il
www.w3c.org.il
eyal@isoc.org.il73\
nagish.org.il
19
It’s wordpress!
www.isoc.org.il
www.w3c.org.il
eyal@isoc.org.il73\
Techniques for WCAG 2.0 (single file)
64il3j.mp/w20
www.w3c.org.il
קווים מנחים 12
21
www.isoc.org.il
www.w3c.org.il
eyal@isoc.org.il73\
נתפס: 1עקרון
( perceive)מבחינה חושית ' לתפוס'ניתן
.את תוכן האתר
22
www.isoc.org.il
www.w3c.org.il
eyal@isoc.org.il73\
פקדים , תיאור תמונה)חלופה טקסטואלית 1.1
(CAPTCHA-חלופה ל, בטפסים
50il3j.mp/w23
www.isoc.org.il
www.w3c.org.il
eyal@isoc.org.il73\
alt-שימוש ב
<img src="newsletter.gif" alt="Free newsletter. Get free recipes, news, and more. Learn more." />
51il3j.mp/w24
www.isoc.org.il
www.w3c.org.il
eyal@isoc.org.il73\
Label element or title attribute
<label for="searchTerm">Search for:</label>
<input id="searchTerm" type="text" size="30" value="" name="searchTerm">
<select title="Search in" id="scope"> …
</select>
52il3j.mp/w25
www.w3c.org.il
טקסט חלופי
26
www.isoc.org.il
www.w3c.org.il
eyal@isoc.org.il73\
או , כתוביות לוידאו) זמן-חלופות עבור מדיה מבוססת 1.2
תיאורי אודיו , תיאורים כתובים של צלילים משמעותיים, קול
(למידע חזותי משמעותי
27
www.isoc.org.il
www.w3c.org.il
eyal@isoc.org.il73\
הפרדת , תגיות נכונות וסמנטיות)תוכן הניתן להתאמה 1.3
זיהוי כותרות , קרבה בין אלמנטים קשורים, תוכן מעיצוב
(ורשימות
28
www.isoc.org.il
www.w3c.org.il
eyal@isoc.org.il73\
הפרידו תוכן מעיצוב. 6
123j.mp/dkrg
...דוגמא
29
•HTML לתוכן
•CSS לעיצוב
עיצוב ללא טבלאות •
, אותו אתר
CSSללא
www.isoc.org.il
www.w3c.org.il
eyal@isoc.org.il73\
שינוי עיצוב–דוגמא
standards.co.il
30
csszengarden.com
www.isoc.org.il
www.w3c.org.il
eyal@isoc.org.il73\
אלמנטים סמנטיים
כותרות-
רשימות-
הדגשה-
-...
31
www.w3c.org.il
העברת משמעות רק בעיצוב–תגיות
www.w3c.org.il
...CSSבלי
www.w3c.org.il
?פתרון
j.mp/w3il61
www.isoc.org.il
www.w3c.org.il
eyal@isoc.org.il73\
אי שימוש בצבע בלבד –הפרדת חזית מרקע )בר הבחנה 1.4
, אי שימוש בתמונה כטקסט, גודל אותיות בר הגדלה, למשמעות
(ניגודיות
35
www.isoc.org.il
www.w3c.org.il
eyal@isoc.org.il73\
שימוש בצבע
1, ,עיבויהדגישו גם באמצעות
8ad3j.mp/w36
שינוי רקעהוספת מסגרת
www.isoc.org.il
www.w3c.org.il
eyal@isoc.org.il73\
צבעים-ניגוד4.5:1ניגוד של לפחות -יחס
57il3j.mp/w
)j.mp/w3ad9 השתמשו בבודק ניגודיות : )
37
כי קשה לקרוא כאשר אין מספיק
ניגודיות
www.isoc.org.il
www.w3c.org.il
eyal@isoc.org.il73\
ניתן להפעלה: 2עקרון
.המרכיבים והניווט ניתנים להפעלה
38
www.isoc.org.il
www.w3c.org.il
eyal@isoc.org.il73\39
אין מלכודות , הגעה לכל הניווט) תפקוד מלא ממקלדת 2.1
(מקלדת
www.isoc.org.il
www.w3c.org.il
eyal@isoc.org.il73\
מקבילים event handlers-השתמשו ב
j.mp/w3il5440
www.isoc.org.il
www.w3c.org.il
eyal@isoc.org.il73\
(בתפריט עליון)אין תמיכה מלאה במקלדת
41
whitehouse.gov
www.isoc.org.il
www.w3c.org.il
eyal@isoc.org.il73\
ספקו חלופה לגרירה
55il3j.mp/w
מצב נגישות בוורדפרס
42
www.isoc.org.il
www.w3c.org.il
eyal@isoc.org.il73\43
אפשרות , sessionהזהרה מפני סיום )מספיק זמן 2.2
אי הקצבת , עצירת עדכונים, עצירת תנועה ואיתחולה, הארכה
( (אם אפשר)זמן לפעולה
www.isoc.org.il
www.w3c.org.il
eyal@isoc.org.il73\
שליטה בעדכון אוטומטי
downrightnow.com44
www.isoc.org.il
www.w3c.org.il
eyal@isoc.org.il73\
שמירת מידע בטופס בכדי אם נדרש אימות המשתמש
(authentication )לפני הגשתו
45
www.isoc.org.il
www.w3c.org.il
eyal@isoc.org.il73\46
מנעת הבהובים וחלקים , עצירת תזוזה)מניעת התקפים 2.3
(זזים
www.isoc.org.il
www.w3c.org.il
eyal@isoc.org.il73\
In 1997, a cartoon on television in Japan sent
over 700 children to the hospital, including
about 500 who had seizures
56il3j.mp/w47
www.isoc.org.il
www.w3c.org.il
eyal@isoc.org.il73\
(או שאינו עובר את הסף)הבהובים בשניה 3-לא יותר מ-
קטנים -איזורים מהבהבים -
48
www.isoc.org.il
www.w3c.org.il
eyal@isoc.org.il73\49
, מספר דרכים לאותו תוכן)קלות ניווט ומציאת מידע 2.4
עקיפת , קישורים ברורים, דפים מובנים עם כותרות נכונות
(פוקוס נראה לעין, סדר פוקוס נכון, בלוקים החוזרים על עצמם
www.isoc.org.il
www.w3c.org.il
eyal@isoc.org.il73\
(גלוי או מוסתר)קישור ישיר לתוכן
nagish.org.il50
www.isoc.org.il
www.w3c.org.il
eyal@isoc.org.il73\
מייד לאחר האלמנט –DOM-הכנסת תוכן דינמי ל•
המפעיל
51
www.isoc.org.il
www.w3c.org.il
eyal@isoc.org.il73\
קישורים ברורים ודילוג לתוכן
a span.hide {
height: 1px;
width: 1px;
position: absolute;
overflow: hidden;
top: -10px;
}
52
www.isoc.org.il
www.w3c.org.il
eyal@isoc.org.il73\
?בתגובות בוורדפרס tabindexלמה יש
53
www.isoc.org.il
www.w3c.org.il
eyal@isoc.org.il73\
השתמשו בפירורי לחם•
מפת אתר•
54
www.isoc.org.il
www.w3c.org.il
eyal@isoc.org.il73\
ניתן להבנה :3עקרון
הטקסט ניתן לקראה ולהבנה
55
www.isoc.org.il
www.w3c.org.il
eyal@isoc.org.il73\56
זיהוי השפה בדף כולו , רמת הטקסט)טקסט בר הבנה 3.1
(רגון'פירוש קיצורים וז, ובחלקיו
www.isoc.org.il
www.w3c.org.il
eyal@isoc.org.il73\
זיהוי שפת הטקסט
<html lang="fr">
<html xml:lang="he”>
57
www.isoc.org.il
www.w3c.org.il
eyal@isoc.org.il73\
הרחבת קיצורים
<p>Tasini <abbr title="and others">et al.</abbr> <abbr title="versus">v.</abbr> The New York Times
58
www.isoc.org.il
www.w3c.org.il
eyal@isoc.org.il73\59
אי שינוי ההקשר בפוקוס או בלי )תפעול ותצוגה צפויים 3.2
(ניווט עקבי, שהמשתמש ביקש
www.w3c.org.il
לא לשנות את העמוד באופן משמעותי בגלל פוקוס
על אלמנט
w3c.org
60
www.isoc.org.il
www.w3c.org.il
eyal@isoc.org.il73\61
הסבר על מה צריך , הסבר מדויק לטעיות)תמיכה בהזנה 3.3
(טקסט עזרה, ולידציה, להזין
(בנייה חכמה של טפסים)
www.isoc.org.il
www.w3c.org.il
eyal@isoc.org.il73\
דרכי מניעת טעויות בטפסים
• Confirmed (review)
• Checked ( for input errors )
• Reversible
62
www.isoc.org.il
www.w3c.org.il
eyal@isoc.org.il73\
יציבות - 4עקרון
תוכנות וכדומה, תאימות מרבית עם דפדפנים
63
www.isoc.org.il
www.w3c.org.il
eyal@isoc.org.il73\64
4.1 Parsing (אי כפילות , קינון נכון, תג פתיחה וסגירה
attributes ,IDs are unique)
לכתוב קוד תקין
www.isoc.org.il
www.w3c.org.il
eyal@isoc.org.il73\
CSS-וה HTML-בדקו את תקינות ה
HTML - .org3validator.wבודק תקינות •
CSS-1add3j.mp/wבודק תקינות •
...דוגמא
65
www.isoc.org.il
www.w3c.org.il
eyal@isoc.org.il73\66
(שימוש בפקדים רגילים פותר את זה)ערך -תפקיד-שם 4.2
www.isoc.org.il
www.w3c.org.il
eyal@isoc.org.il73\
: לדוגמה
checkboxזהו
מֹו "קראתי את תנאי השימוש: "שְׁ
".לא מסומן: "מצבו
addd3j.mp/w67
<input type="checkbox" id="markuplang" name="computerskills"
checked="checked“ /> <label for="markuplang"> תנאי את קראתי
<label/>השימוש
www.isoc.org.il
www.w3c.org.il
eyal@isoc.org.il73\
:השתמשו ב
createElement()
createTextNode()
appendChild()
:ולא ב
object.innerHTML
document.write
:
58il3j.mp/w68
www.isoc.org.il
www.w3c.org.il
eyal@isoc.org.il73\
Java accessiblity - j.mp/w3il59
Flash accessibility - j.mp/w3il60
69
www.isoc.org.il
www.w3c.org.il
eyal@isoc.org.il73\
עזרה
70
accessifyforum.com
www.isoc.org.il
www.w3c.org.il
eyal@isoc.org.il73\71
?איך מתחילים
www.isoc.org.il
www.w3c.org.il
eyal@isoc.org.il73\
(בעברית) WCAG 2.0קראו את 1.
קרובים–שימרו את הכלים מהמצגת 2.
(הרשמו למקורות מידע. 3)
היו בקרותיים וחישבו על –בזמן התכנון והפיתוח . 4
נגישות
72
www.isoc.org.il
www.w3c.org.il
eyal@isoc.org.il73\
אייל סלע
eyal@isoc.org.il
@isociltech @eyalsela
73
!צרו קשר
top related