Download - כלים ושיטות להנגשת אתרי אינטרנט
![Page 1: כלים ושיטות להנגשת אתרי אינטרנט](https://reader030.vdocuments.site/reader030/viewer/2022020110/5560b6b2d8b42a033c8b4aec/html5/thumbnails/1.jpg)
www.isoc.org.il
www.w3c.org.il
כלים ושיטות להנגשת אתרי אינטרנט
אייל סלע
איגוד האינטרנט הישראלי , מנהל פרויקטיםהישראלי W3C-ומשרד ה
1
5/9/2010
![Page 3: כלים ושיטות להנגשת אתרי אינטרנט](https://reader030.vdocuments.site/reader030/viewer/2022020110/5560b6b2d8b42a033c8b4aec/html5/thumbnails/3.jpg)
www.isoc.org.il
www.w3c.org.il
cdoc3j.mp/w
![Page 4: כלים ושיטות להנגשת אתרי אינטרנט](https://reader030.vdocuments.site/reader030/viewer/2022020110/5560b6b2d8b42a033c8b4aec/html5/thumbnails/4.jpg)
www.isoc.org.il
www.w3c.org.il
...תוכנית
מבוא•
נגישות•
כלים•
קווים מנחים 12•
איך מתחילים•
4
![Page 5: כלים ושיטות להנגשת אתרי אינטרנט](https://reader030.vdocuments.site/reader030/viewer/2022020110/5560b6b2d8b42a033c8b4aec/html5/thumbnails/5.jpg)
www.isoc.org.il
www.w3c.org.il
איגוד האינטרנט הישראלי: אודות
: שלוחת האיגוד הבינלאומי
עמותה ללא מטרת רווח
פועל לקידום האינטרנט והטמעתו בישראל
חברתית , חינוכית, מחקרית, כתשתית טכנולוגית
.ועסקית
5
![Page 6: כלים ושיטות להנגשת אתרי אינטרנט](https://reader030.vdocuments.site/reader030/viewer/2022020110/5560b6b2d8b42a033c8b4aec/html5/thumbnails/6.jpg)
www.isoc.org.il
www.w3c.org.il
W3C
ארגון בינלאומי
ארגונים 350-כ
. פורום ניטראלי ליצירת תקני רשת באינטרנט
:משימה
להוביל את הרשת למיצוי הפוטנציאל על ידי פיתוח
פרוטוקולים וקווים מנחים שיאפשרו את צמיחתה לטווח .ארוך
6
![Page 8: כלים ושיטות להנגשת אתרי אינטרנט](https://reader030.vdocuments.site/reader030/viewer/2022020110/5560b6b2d8b42a033c8b4aec/html5/thumbnails/8.jpg)
www.isoc.org.il
www.w3c.org.il
:מוגבלויות המשפיעות על השימוש באינטרנט
(ברייל, קוראי מסך) עיוורון
(מגדילי מסך)ראייה לקויה
עיוורון צבעים
שמיעה
קוגניציה
(אי שימוש בעכבר, עזרי ניווט) מוטוריקה
8
![Page 9: כלים ושיטות להנגשת אתרי אינטרנט](https://reader030.vdocuments.site/reader030/viewer/2022020110/5560b6b2d8b42a033c8b4aec/html5/thumbnails/9.jpg)
www.isoc.org.il
www.w3c.org.il
?מהו אתר נגיש
אתר המאפשר לאנשים עם מוגבלות לגלוש באותה רמה
.של יעילות והנאה ככל הגולשים
9
![Page 10: כלים ושיטות להנגשת אתרי אינטרנט](https://reader030.vdocuments.site/reader030/viewer/2022020110/5560b6b2d8b42a033c8b4aec/html5/thumbnails/10.jpg)
www.isoc.org.il
www.w3c.org.il
....נגישות זה גםROI (יותר מצליחים להשתמש, יותר קהל)
SEO (פשוט ככה)...
(תת קבוצה) שימושיות
Mobile (יש חפיפה בין צרכי המשתמשים)
(מרגישים את ההבדל) מקצועיות
...(בקרוב)חוק
(עלייה בתוחלת החיים)עתיד
10
![Page 13: כלים ושיטות להנגשת אתרי אינטרנט](https://reader030.vdocuments.site/reader030/viewer/2022020110/5560b6b2d8b42a033c8b4aec/html5/thumbnails/13.jpg)
www.isoc.org.il
www.w3c.org.il
2.0 (WCAG)הנחיות להנגשת תכני אתרי אינטרנט
j.mp/w3av213
![Page 14: כלים ושיטות להנגשת אתרי אינטרנט](https://reader030.vdocuments.site/reader030/viewer/2022020110/5560b6b2d8b42a033c8b4aec/html5/thumbnails/14.jpg)
www.isoc.org.il
www.w3c.org.il
עקרונות 4
קווים מנחים 12
מדדי הצלחה
))
שיטות
ada3j.mp/w14
![Page 17: כלים ושיטות להנגשת אתרי אינטרנט](https://reader030.vdocuments.site/reader030/viewer/2022020110/5560b6b2d8b42a033c8b4aec/html5/thumbnails/17.jpg)
www.isoc.org.il
www.w3c.org.il
HTML, CSS-מנוע חיפוש לאלמנטים ב: כלי עזר
...דוגמא
8 cmo3j.mp/w17
–וגם
נגישות•
•Mobile
•SVG
![Page 18: כלים ושיטות להנגשת אתרי אינטרנט](https://reader030.vdocuments.site/reader030/viewer/2022020110/5560b6b2d8b42a033c8b4aec/html5/thumbnails/18.jpg)
www.w3c.org.il
titleחיפוש –דוגמא
![Page 20: כלים ושיטות להנגשת אתרי אינטרנט](https://reader030.vdocuments.site/reader030/viewer/2022020110/5560b6b2d8b42a033c8b4aec/html5/thumbnails/20.jpg)
www.isoc.org.il
www.w3c.org.il
Techniques for WCAG 2.0 (single file)
64il3j.mp/w20
![Page 21: כלים ושיטות להנגשת אתרי אינטרנט](https://reader030.vdocuments.site/reader030/viewer/2022020110/5560b6b2d8b42a033c8b4aec/html5/thumbnails/21.jpg)
www.w3c.org.il
קווים מנחים 12
21
![Page 22: כלים ושיטות להנגשת אתרי אינטרנט](https://reader030.vdocuments.site/reader030/viewer/2022020110/5560b6b2d8b42a033c8b4aec/html5/thumbnails/22.jpg)
www.isoc.org.il
www.w3c.org.il
נתפס: 1עקרון
( perceive)מבחינה חושית ' לתפוס'ניתן
.את תוכן האתר
22
![Page 23: כלים ושיטות להנגשת אתרי אינטרנט](https://reader030.vdocuments.site/reader030/viewer/2022020110/5560b6b2d8b42a033c8b4aec/html5/thumbnails/23.jpg)
www.isoc.org.il
www.w3c.org.il
פקדים , תיאור תמונה)חלופה טקסטואלית 1.1
(CAPTCHA-חלופה ל, בטפסים
50il3j.mp/w23
![Page 24: כלים ושיטות להנגשת אתרי אינטרנט](https://reader030.vdocuments.site/reader030/viewer/2022020110/5560b6b2d8b42a033c8b4aec/html5/thumbnails/24.jpg)
www.isoc.org.il
www.w3c.org.il
alt-שימוש ב
<img src="newsletter.gif" alt="Free newsletter. Get free recipes, news, and more. Learn more." />
51il3j.mp/w24
![Page 25: כלים ושיטות להנגשת אתרי אינטרנט](https://reader030.vdocuments.site/reader030/viewer/2022020110/5560b6b2d8b42a033c8b4aec/html5/thumbnails/25.jpg)
www.isoc.org.il
www.w3c.org.il
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
![Page 26: כלים ושיטות להנגשת אתרי אינטרנט](https://reader030.vdocuments.site/reader030/viewer/2022020110/5560b6b2d8b42a033c8b4aec/html5/thumbnails/26.jpg)
www.w3c.org.il
טקסט חלופי
26
![Page 27: כלים ושיטות להנגשת אתרי אינטרנט](https://reader030.vdocuments.site/reader030/viewer/2022020110/5560b6b2d8b42a033c8b4aec/html5/thumbnails/27.jpg)
www.isoc.org.il
www.w3c.org.il
או , כתוביות לוידאו) זמן-חלופות עבור מדיה מבוססת 1.2
תיאורי אודיו , תיאורים כתובים של צלילים משמעותיים, קול
(למידע חזותי משמעותי
27
![Page 28: כלים ושיטות להנגשת אתרי אינטרנט](https://reader030.vdocuments.site/reader030/viewer/2022020110/5560b6b2d8b42a033c8b4aec/html5/thumbnails/28.jpg)
www.isoc.org.il
www.w3c.org.il
הפרדת , תגיות נכונות וסמנטיות)תוכן הניתן להתאמה 1.3
זיהוי כותרות , קרבה בין אלמנטים קשורים, תוכן מעיצוב
(ורשימות
28
![Page 29: כלים ושיטות להנגשת אתרי אינטרנט](https://reader030.vdocuments.site/reader030/viewer/2022020110/5560b6b2d8b42a033c8b4aec/html5/thumbnails/29.jpg)
www.isoc.org.il
www.w3c.org.il
הפרידו תוכן מעיצוב. 6
123j.mp/dkrg
...דוגמא
29
•HTML לתוכן
•CSS לעיצוב
עיצוב ללא טבלאות •
, אותו אתר
CSSללא
![Page 30: כלים ושיטות להנגשת אתרי אינטרנט](https://reader030.vdocuments.site/reader030/viewer/2022020110/5560b6b2d8b42a033c8b4aec/html5/thumbnails/30.jpg)
www.isoc.org.il
www.w3c.org.il
שינוי עיצוב–דוגמא
standards.co.il
30
csszengarden.com
![Page 32: כלים ושיטות להנגשת אתרי אינטרנט](https://reader030.vdocuments.site/reader030/viewer/2022020110/5560b6b2d8b42a033c8b4aec/html5/thumbnails/32.jpg)
www.w3c.org.il
העברת משמעות רק בעיצוב–תגיות
![Page 33: כלים ושיטות להנגשת אתרי אינטרנט](https://reader030.vdocuments.site/reader030/viewer/2022020110/5560b6b2d8b42a033c8b4aec/html5/thumbnails/33.jpg)
www.w3c.org.il
...CSSבלי
![Page 34: כלים ושיטות להנגשת אתרי אינטרנט](https://reader030.vdocuments.site/reader030/viewer/2022020110/5560b6b2d8b42a033c8b4aec/html5/thumbnails/34.jpg)
www.w3c.org.il
?פתרון
j.mp/w3il61
![Page 35: כלים ושיטות להנגשת אתרי אינטרנט](https://reader030.vdocuments.site/reader030/viewer/2022020110/5560b6b2d8b42a033c8b4aec/html5/thumbnails/35.jpg)
www.isoc.org.il
www.w3c.org.il
אי שימוש בצבע בלבד –הפרדת חזית מרקע )בר הבחנה 1.4
, אי שימוש בתמונה כטקסט, גודל אותיות בר הגדלה, למשמעות
(ניגודיות
35
![Page 36: כלים ושיטות להנגשת אתרי אינטרנט](https://reader030.vdocuments.site/reader030/viewer/2022020110/5560b6b2d8b42a033c8b4aec/html5/thumbnails/36.jpg)
www.isoc.org.il
www.w3c.org.il
שימוש בצבע
1, ,עיבויהדגישו גם באמצעות
8ad3j.mp/w36
שינוי רקעהוספת מסגרת
![Page 37: כלים ושיטות להנגשת אתרי אינטרנט](https://reader030.vdocuments.site/reader030/viewer/2022020110/5560b6b2d8b42a033c8b4aec/html5/thumbnails/37.jpg)
www.isoc.org.il
www.w3c.org.il
צבעים-ניגוד4.5:1ניגוד של לפחות -יחס
57il3j.mp/w
)j.mp/w3ad9 השתמשו בבודק ניגודיות : )
37
כי קשה לקרוא כאשר אין מספיק
ניגודיות
![Page 38: כלים ושיטות להנגשת אתרי אינטרנט](https://reader030.vdocuments.site/reader030/viewer/2022020110/5560b6b2d8b42a033c8b4aec/html5/thumbnails/38.jpg)
www.isoc.org.il
www.w3c.org.il
ניתן להפעלה: 2עקרון
.המרכיבים והניווט ניתנים להפעלה
38
![Page 39: כלים ושיטות להנגשת אתרי אינטרנט](https://reader030.vdocuments.site/reader030/viewer/2022020110/5560b6b2d8b42a033c8b4aec/html5/thumbnails/39.jpg)
www.isoc.org.il
www.w3c.org.il
אין מלכודות , הגעה לכל הניווט) תפקוד מלא ממקלדת 2.1
(מקלדת
![Page 40: כלים ושיטות להנגשת אתרי אינטרנט](https://reader030.vdocuments.site/reader030/viewer/2022020110/5560b6b2d8b42a033c8b4aec/html5/thumbnails/40.jpg)
www.isoc.org.il
www.w3c.org.il
מקבילים event handlers-השתמשו ב
j.mp/w3il5440
![Page 41: כלים ושיטות להנגשת אתרי אינטרנט](https://reader030.vdocuments.site/reader030/viewer/2022020110/5560b6b2d8b42a033c8b4aec/html5/thumbnails/41.jpg)
www.isoc.org.il
www.w3c.org.il
(בתפריט עליון)אין תמיכה מלאה במקלדת
41
whitehouse.gov
![Page 42: כלים ושיטות להנגשת אתרי אינטרנט](https://reader030.vdocuments.site/reader030/viewer/2022020110/5560b6b2d8b42a033c8b4aec/html5/thumbnails/42.jpg)
www.isoc.org.il
www.w3c.org.il
ספקו חלופה לגרירה
55il3j.mp/w
מצב נגישות בוורדפרס
42
![Page 43: כלים ושיטות להנגשת אתרי אינטרנט](https://reader030.vdocuments.site/reader030/viewer/2022020110/5560b6b2d8b42a033c8b4aec/html5/thumbnails/43.jpg)
www.isoc.org.il
www.w3c.org.il
אפשרות , sessionהזהרה מפני סיום )מספיק זמן 2.2
אי הקצבת , עצירת עדכונים, עצירת תנועה ואיתחולה, הארכה
( (אם אפשר)זמן לפעולה
![Page 44: כלים ושיטות להנגשת אתרי אינטרנט](https://reader030.vdocuments.site/reader030/viewer/2022020110/5560b6b2d8b42a033c8b4aec/html5/thumbnails/44.jpg)
www.isoc.org.il
www.w3c.org.il
שליטה בעדכון אוטומטי
downrightnow.com44
![Page 45: כלים ושיטות להנגשת אתרי אינטרנט](https://reader030.vdocuments.site/reader030/viewer/2022020110/5560b6b2d8b42a033c8b4aec/html5/thumbnails/45.jpg)
www.isoc.org.il
www.w3c.org.il
שמירת מידע בטופס בכדי אם נדרש אימות המשתמש
(authentication )לפני הגשתו
45
![Page 46: כלים ושיטות להנגשת אתרי אינטרנט](https://reader030.vdocuments.site/reader030/viewer/2022020110/5560b6b2d8b42a033c8b4aec/html5/thumbnails/46.jpg)
www.isoc.org.il
www.w3c.org.il
מנעת הבהובים וחלקים , עצירת תזוזה)מניעת התקפים 2.3
(זזים
![Page 47: כלים ושיטות להנגשת אתרי אינטרנט](https://reader030.vdocuments.site/reader030/viewer/2022020110/5560b6b2d8b42a033c8b4aec/html5/thumbnails/47.jpg)
www.isoc.org.il
www.w3c.org.il
In 1997, a cartoon on television in Japan sent
over 700 children to the hospital, including
about 500 who had seizures
56il3j.mp/w47
![Page 48: כלים ושיטות להנגשת אתרי אינטרנט](https://reader030.vdocuments.site/reader030/viewer/2022020110/5560b6b2d8b42a033c8b4aec/html5/thumbnails/48.jpg)
www.isoc.org.il
www.w3c.org.il
(או שאינו עובר את הסף)הבהובים בשניה 3-לא יותר מ-
קטנים -איזורים מהבהבים -
48
![Page 49: כלים ושיטות להנגשת אתרי אינטרנט](https://reader030.vdocuments.site/reader030/viewer/2022020110/5560b6b2d8b42a033c8b4aec/html5/thumbnails/49.jpg)
www.isoc.org.il
www.w3c.org.il
, מספר דרכים לאותו תוכן)קלות ניווט ומציאת מידע 2.4
עקיפת , קישורים ברורים, דפים מובנים עם כותרות נכונות
(פוקוס נראה לעין, סדר פוקוס נכון, בלוקים החוזרים על עצמם
![Page 50: כלים ושיטות להנגשת אתרי אינטרנט](https://reader030.vdocuments.site/reader030/viewer/2022020110/5560b6b2d8b42a033c8b4aec/html5/thumbnails/50.jpg)
www.isoc.org.il
www.w3c.org.il
(גלוי או מוסתר)קישור ישיר לתוכן
nagish.org.il50
![Page 51: כלים ושיטות להנגשת אתרי אינטרנט](https://reader030.vdocuments.site/reader030/viewer/2022020110/5560b6b2d8b42a033c8b4aec/html5/thumbnails/51.jpg)
www.isoc.org.il
www.w3c.org.il
מייד לאחר האלמנט –DOM-הכנסת תוכן דינמי ל•
המפעיל
51
![Page 52: כלים ושיטות להנגשת אתרי אינטרנט](https://reader030.vdocuments.site/reader030/viewer/2022020110/5560b6b2d8b42a033c8b4aec/html5/thumbnails/52.jpg)
www.isoc.org.il
www.w3c.org.il
קישורים ברורים ודילוג לתוכן
a span.hide {
height: 1px;
width: 1px;
position: absolute;
overflow: hidden;
top: -10px;
}
52
![Page 56: כלים ושיטות להנגשת אתרי אינטרנט](https://reader030.vdocuments.site/reader030/viewer/2022020110/5560b6b2d8b42a033c8b4aec/html5/thumbnails/56.jpg)
www.isoc.org.il
www.w3c.org.il
זיהוי השפה בדף כולו , רמת הטקסט)טקסט בר הבנה 3.1
(רגון'פירוש קיצורים וז, ובחלקיו
![Page 57: כלים ושיטות להנגשת אתרי אינטרנט](https://reader030.vdocuments.site/reader030/viewer/2022020110/5560b6b2d8b42a033c8b4aec/html5/thumbnails/57.jpg)
www.isoc.org.il
www.w3c.org.il
זיהוי שפת הטקסט
<html lang="fr">
<html xml:lang="he”>
57
![Page 58: כלים ושיטות להנגשת אתרי אינטרנט](https://reader030.vdocuments.site/reader030/viewer/2022020110/5560b6b2d8b42a033c8b4aec/html5/thumbnails/58.jpg)
www.isoc.org.il
www.w3c.org.il
הרחבת קיצורים
<p>Tasini <abbr title="and others">et al.</abbr> <abbr title="versus">v.</abbr> The New York Times
58
![Page 59: כלים ושיטות להנגשת אתרי אינטרנט](https://reader030.vdocuments.site/reader030/viewer/2022020110/5560b6b2d8b42a033c8b4aec/html5/thumbnails/59.jpg)
www.isoc.org.il
www.w3c.org.il
אי שינוי ההקשר בפוקוס או בלי )תפעול ותצוגה צפויים 3.2
(ניווט עקבי, שהמשתמש ביקש
![Page 60: כלים ושיטות להנגשת אתרי אינטרנט](https://reader030.vdocuments.site/reader030/viewer/2022020110/5560b6b2d8b42a033c8b4aec/html5/thumbnails/60.jpg)
www.w3c.org.il
לא לשנות את העמוד באופן משמעותי בגלל פוקוס
על אלמנט
w3c.org
60
![Page 61: כלים ושיטות להנגשת אתרי אינטרנט](https://reader030.vdocuments.site/reader030/viewer/2022020110/5560b6b2d8b42a033c8b4aec/html5/thumbnails/61.jpg)
www.isoc.org.il
www.w3c.org.il
הסבר על מה צריך , הסבר מדויק לטעיות)תמיכה בהזנה 3.3
(טקסט עזרה, ולידציה, להזין
(בנייה חכמה של טפסים)
![Page 62: כלים ושיטות להנגשת אתרי אינטרנט](https://reader030.vdocuments.site/reader030/viewer/2022020110/5560b6b2d8b42a033c8b4aec/html5/thumbnails/62.jpg)
www.isoc.org.il
www.w3c.org.il
דרכי מניעת טעויות בטפסים
• Confirmed (review)
• Checked ( for input errors )
• Reversible
62
![Page 63: כלים ושיטות להנגשת אתרי אינטרנט](https://reader030.vdocuments.site/reader030/viewer/2022020110/5560b6b2d8b42a033c8b4aec/html5/thumbnails/63.jpg)
www.isoc.org.il
www.w3c.org.il
יציבות - 4עקרון
תוכנות וכדומה, תאימות מרבית עם דפדפנים
63
![Page 64: כלים ושיטות להנגשת אתרי אינטרנט](https://reader030.vdocuments.site/reader030/viewer/2022020110/5560b6b2d8b42a033c8b4aec/html5/thumbnails/64.jpg)
www.isoc.org.il
www.w3c.org.il
4.1 Parsing (אי כפילות , קינון נכון, תג פתיחה וסגירה
attributes ,IDs are unique)
לכתוב קוד תקין
![Page 65: כלים ושיטות להנגשת אתרי אינטרנט](https://reader030.vdocuments.site/reader030/viewer/2022020110/5560b6b2d8b42a033c8b4aec/html5/thumbnails/65.jpg)
www.isoc.org.il
www.w3c.org.il
CSS-וה HTML-בדקו את תקינות ה
HTML - .org3validator.wבודק תקינות •
CSS-1add3j.mp/wבודק תקינות •
...דוגמא
65
![Page 66: כלים ושיטות להנגשת אתרי אינטרנט](https://reader030.vdocuments.site/reader030/viewer/2022020110/5560b6b2d8b42a033c8b4aec/html5/thumbnails/66.jpg)
www.isoc.org.il
www.w3c.org.il
(שימוש בפקדים רגילים פותר את זה)ערך -תפקיד-שם 4.2
![Page 67: כלים ושיטות להנגשת אתרי אינטרנט](https://reader030.vdocuments.site/reader030/viewer/2022020110/5560b6b2d8b42a033c8b4aec/html5/thumbnails/67.jpg)
www.isoc.org.il
www.w3c.org.il
: לדוגמה
checkboxזהו
מֹו "קראתי את תנאי השימוש: "שְׁ
".לא מסומן: "מצבו
addd3j.mp/w67
<input type="checkbox" id="markuplang" name="computerskills"
checked="checked“ /> <label for="markuplang"> תנאי את קראתי
<label/>השימוש
![Page 68: כלים ושיטות להנגשת אתרי אינטרנט](https://reader030.vdocuments.site/reader030/viewer/2022020110/5560b6b2d8b42a033c8b4aec/html5/thumbnails/68.jpg)
www.isoc.org.il
www.w3c.org.il
:השתמשו ב
createElement()
createTextNode()
appendChild()
:ולא ב
object.innerHTML
document.write
:
58il3j.mp/w68
![Page 69: כלים ושיטות להנגשת אתרי אינטרנט](https://reader030.vdocuments.site/reader030/viewer/2022020110/5560b6b2d8b42a033c8b4aec/html5/thumbnails/69.jpg)
www.isoc.org.il
www.w3c.org.il
Java accessiblity - j.mp/w3il59
Flash accessibility - j.mp/w3il60
69
![Page 72: כלים ושיטות להנגשת אתרי אינטרנט](https://reader030.vdocuments.site/reader030/viewer/2022020110/5560b6b2d8b42a033c8b4aec/html5/thumbnails/72.jpg)
www.isoc.org.il
www.w3c.org.il
(בעברית) WCAG 2.0קראו את 1.
קרובים–שימרו את הכלים מהמצגת 2.
(הרשמו למקורות מידע. 3)
היו בקרותיים וחישבו על –בזמן התכנון והפיתוח . 4
נגישות
72
![Page 73: כלים ושיטות להנגשת אתרי אינטרנט](https://reader030.vdocuments.site/reader030/viewer/2022020110/5560b6b2d8b42a033c8b4aec/html5/thumbnails/73.jpg)
www.isoc.org.il
www.w3c.org.il
אייל סלע
@isociltech @eyalsela
73
!צרו קשר