View
1.211
Download
5
Category
Preview:
DESCRIPTION
http://www.w3c.org.il
Citation preview
1 / 116
כלים ושיטות להנגשת אתרי אינטרנט
WCAG 2.0על פי
אייל סלע
איגוד האינטרנט הישראלי , מנהל פרויקטיםהישראלי W3C-ומשרד ה
23/2/2011
2 / 116
...תוכנית
מהי נגישות•
כלים•
WCAG 2.0 -הקווים המנחים 12•
סיכום•
3 / 116
איגוד האינטרנט הישראלישלוחת האיגוד הבינלאומי
עמותה ללא מטרת רווח
פועל לקידום האינטרנט והטמעתו בישראל כתשתית
חברתית ועסקית, חינוכית, מחקרית, טכנולוגית
4 / 1164
W3C
ארגון בינלאומי •
ארגונים 350-כ•
פורום ניטראלי ליצירת תקני הווב•
:משימה•
להוביל את הרשת למיצוי הפוטנציאל על ידי פיתוח
פרוטוקולים וקווים מנחים שיאפשרו את צמיחתה .לטווח ארוך
5 / 116
מהי
נגישות
6 / 116
:מוגבלויות המשפיעות על השימוש באינטרנט
(ברייל, קוראי מסך) עיוורון
(מגדילי מסך)ראייה לקויה
עיוורון צבעים
שמיעה
קוגניציה
(אי שימוש בעכבר, עזרי ניווט) מוטוריקה
7 / 116
?מהו אתר נגיש
אתר המאפשר לאנשים עם מוגבלות לגלוש באותה רמה
.של יעילות והנאה ככל הגולשים
8 / 116
....נגישות זה גםROI (יותר מצליחים להשתמש, יותר קהל)
SEO (פשוט ככה)...
(תת קבוצה) שימושיות
Mobile (יש חפיפה בין צרכי המשתמשים)
(מרגישים את ההבדל) מקצועיות
...(בקרוב)חוק
(עלייה בתוחלת החיים)שוק מתרחב
9 / 116
...אה כן
אנשים
10 / 116
?על מה אנחנו מדברים
11 / 116
2.0 (WCAG)הנחיות להנגשת תכני אתרי אינטרנט
j.mp/w3av2
12 / 116
עקרונות 4
קווים מנחים 12
מדדי הצלחה
))
שיטות
ada3j.mp/w
13 / 116
A ,AA ,AAA–שלוש רמות נגישות
14 / 116
תקן ישראלי
בהכנה במכון התקנים•
2011–ביקורת הציבור •
WCAG 2.0מבוסס על •
התאמה לסביבה הישראלית•
15 / 116
כלים
16 / 116
HTML, CSS-מנוע חיפוש לאלמנטים ב: כלי עזר
...דוגמא
8 cmo3j.mp/w
–וגם
נגישות•
•Mobile
•SVG
17 / 116
titleחיפוש –דוגמא
18 / 116
nagish.org.il
19 / 116
Techniques for WCAG 2.0 (single file)
64il3j.mp/w19
20 / 116
WCAG 2.0
הקווים המנחים 12
20
21 / 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
22 / 116
נתפס: 1עקרון
( perceive)מבחינה חושית ' לתפוס'ניתן
.את תוכן האתר
it can't be invisible to all of their senses
23 / 116
חלופה טקסטואלית 1.1(CAPTCHA-חלופה ל, פקדים בטפסים, תיאור תמונה)
50il3j.mp/w
24 / 116
alt-שימוש ב: נגיש
<img src="newsletter.gif" alt="Free newsletter. Get free recipes, news, and more. Learn more." />
(vs title)
j.mp/w3il51
25 / 116
חסר משמעות altטקסט : לא נגיש
25
26 / 116
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>
j.mp/w3il52
27 / 116
טקסט חלופי: נגיש
29 / 116
–תוכן בלתי־נראה , עיצוב, קישוט
יכולה להתעלם ממנו טכנולוגיה מסייעתבאופן ש
29
30 / 116
זמן-חלופות עבור מדיה מבוססת 1.2תיאורים כתובים של צלילים , או קול, כתוביות לוידאו)
(תיאורי אודיו למידע חזותי משמעותי, משמעותיים
32 / 116
אין תמלול לפודקסט: לא נגיש
O7m65bit.ly/f
33 / 116
-יעוץ משפטי מבוסס וידאו : נגיש
.בשפת הסימנים
radlegalservices.org.uk/bsl-advice
34 / 116
תוכן הניתן להתאמה 1.3קרבה בין , הפרדת תוכן מעיצוב, תגיות נכונות וסמנטיות)
(זיהוי כותרות ורשימות, אלמנטים קשורים
35 / 116
הפרידו תוכן מעיצוב: נגיש
j.mp/dkrg123
...דוגמא
•HTML לתוכן
•CSS לעיצוב
עיצוב ללא טבלאות •
, אותו אתר
CSSללא
36 / 116
שינוי עיצוב–דוגמא : נגיש
standards.co.il csszengarden.com
37 / 116
אלמנטים סמנטיים: נגיש
– <h1> - כותרות• <h6>
<ui>ו <ul> -רשימות ותפריטים •
<p> - פסקה•
<strong>- הדגשה•
39 / 116
שימוש נכון בכותרות: נגיש
weboverhauls.com/dennislembree/
41 / 116
Failure Example 1: A heading: לא נגיש
used only for visual effect<p>Interested in learning more? Write to us at</p>
<h4>3333 Third Avenue, Suite 300 · New York City</h4>
<p>And we'll send you the complete informational packet absolutely Free!</p>
<h1>Study on the Use of Heading Elements in Web Pages</h1>
<h3>Joe Jones and Mary Smith<h3>
<h4>March 14, 2006</h4>
<h2>Abstract</h2>
<p>A study was conducted in early 2006 …</p>
42 / 116
קישורים ברורים ודילוג לתוכן
a span.hide {
height: 1px;
width: 1px;
position: absolute;
overflow: hidden;
top: -10px;
}
43 / 116
-תגיות חדשות לשיפור סמנטיקה ב
HTML5
<header>
<section>
<footer>
<nav>
<article>
<aside>
…
44 / 116
הדרכה בהבנת תוכן ובהפעלתו לא תסתמך רק על
, גודל, כגון צורה, המאפיינים החושיים של מרכיבים.כיוון או צליל, מיקום חזותי
44
45 / 116
העברת משמעות רק בעיצוב–תגיות : לא נגיש
בלי
CSS
46 / 116
:המנעו מ...." בצד ימיןהקטגוריות ש"
.... כפתור העגוללחצו על ה"
46
47 / 116
נמצא גם –מידע המועבר בצבע בלבד :נגיש
CSSבטקסט ומוסתר בעזרת
caniuse.com/datalist
49 / 116
בר הבחנה 1.4גודל , אי שימוש בצבע בלבד למשמעות–הפרדת חזית מרקע )
(ניגודיות, אי שימוש בתמונה כטקסט, אותיות בר הגדלה
50 / 116
שימוש בצבע
1, ,עיבויהדגישו גם באמצעות
8ad3j.mp/w
שינוי רקעהוספת מסגרת
52 / 116
צבעים-ניגוד4.5:1ניגוד של לפחות -יחס
(j.mp/cont123 ,j.mp/w3ad9 השתמשו בבודק ניגודיות : )
כי קשה לקרוא כאשר אין מספיק
ניגודיות
53 / 116
ניגודיות נמוכה בכותרת :לא נגיש
CQh26bit.ly/h
57 / 116
Or Just fluied: נגיש
58 / 116
3-ליותר מ)אם יש מוסיקה אוטומטי :שליטה בשמע
להחליש/ניתן להפסיק –( שניות
:דוגמא
59 / 116
לא מצאתי
60 / 116
ניתן להפעלה: 2עקרון .המרכיבים והניווט ניתנים להפעלה
the interface cannot require
interaction that a user cannot perform
61 / 116
תפקוד מלא ממקלדת 2.1(אין מלכודות מקלדת, הגעה לכל הניווט)
62 / 116
אי אפשר –במעבר מקלדת : לא נגיש
לראות איפה הפוקוס
businessinsider.com
64 / 116
event handlers-השתמשו ב
מקבילים
j.mp/w3il54
66 / 116
בלבד hover:הסתמכות על : לא נגיש
ניגודיות נמוכה+
helppassiton.co.uk
68 / 116
ספקו חלופה לגרירה: נגיש
j.mp/w3il55
מצב נגישות בוורדפרס
71 / 116
מקשי קיצור בפייסבוק: נגיש
72 / 116
מספיק זמן 2.2עצירת תנועה , אפשרות הארכה, sessionהזהרה מפני סיום )
( (אם אפשר)אי הקצבת זמן לפעולה , עצירת עדכונים, ואיתחולה
74 / 116
שמירת מידע בטופס בכדי אם נדרש אימות המשתמש
(authentication )לפני הגשתו
75 / 116
בשירותים מקוונים של session-הארכת ה
הבנק
76 / 116
מניעת התקפים 2.3(מנעת הבהובים וחלקים זזים, עצירת תזוזה)
77 / 116
(או שאינו עובר את הסף)הבהובים בשניה 3-לא יותר מ-
קטנים -איזורים מהבהבים -
79 / 116
גדול, צבעוני, הרבה תנועה: לא נגיש
13885it.themarker.com/tmit/article/
82 / 116
קלות ניווט ומציאת מידע 2.4, דפים מובנים עם כותרות נכונות, מספר דרכים לאותו תוכן)
סדר פוקוס , עקיפת בלוקים החוזרים על עצמם, קישורים ברורים
(נכון
88 / 116
ניתן להבנה :3עקרון הטקסט ניתן לקראה ולהבנה
the content or operation cannot be
beyond their understanding
89 / 116
טקסט בר הבנה 3.1פירוש קיצורים , זיהוי השפה בדף כולו ובחלקיו, רמת הטקסט)
(רגון'וז
90 / 116
זיהוי שפת הטקסט: נגיש
<html lang="fr">
<html xml:lang="he”>
91 / 116
(למעט טקסט משפטי)
92 / 116
הרחבת קיצורים: נגיש
<p>Tasini <abbr title="and others">et al.</abbr> <abbr title="versus">v.</abbr> The New York Times
93 / 116
תפעול ותצוגה צפויים 3.2(ניווט עקבי, אי שינוי ההקשר בפוקוס או בלי שהמשתמש ביקש)
94 / 116
לא לשנות את העמוד באופן משמעותי : נגיש
בגלל פוקוס על אלמנט
w3c.org
96 / 116
תמיכה בהזנה 3.3טקסט , ולידציה, הסבר על מה צריך להזין, הסבר מדויק לטעיות
(עזרה
(בנייה חכמה של טפסים)
97 / 116
דרכי מניעת טעויות בטפסים
ניתן לבטל הפעולה - הפיכּות•
תצוגה מקדימה -אישור •
בדיקת הערכים שהוזנו –בדיקה •
98 / 116
טופס בנוי היטב: נגיש
webaim.org/contact
שגיאות מוצגות כקישורים בראש הטופס•
מוסבר מה הטעות באופן מדויק•
•<label for=“x”>
...CAPTCHאין •
!!(ולידציה לאימייל: חסר)•
99 / 116
:נגיש
www.data.gov.uk/user/register
101 / 116
עזרה בעת זיהוי טעות בטופס: נגיש
הצעת תיקון אפשרי
los.direct.gov.uk
102 / 116
עזרה
קישור לטקסט עזרה-
הצגת דוגמאות לערכים נכונים-
103 / 116
יציבות - 4עקרון תוכנות וכדומה, תאימות מרבית עם דפדפנים
as technologies and user agents evolve,
the content should remain accessible
104 / 116
4.1 Parsing attributes ,IDs areאי כפילות , קינון נכון, תג פתיחה וסגירה)
unique)
לכתוב קוד תקין
105 / 116
CSS-וה HTML-בדקו את תקינות הHTML - .org3validator.wבודק תקינות •
CSS-1add3j.mp/wבודק תקינות •
106 / 116
ערך-תפקיד-שם 4.2(שימוש בפקדים רגילים פותר את זה)
107 / 116
: לדוגמה
"קראתי את תנאי השימוש: "שם•
checkbox: תפקיד•
".מסומן: "ערך•
<input type="checkbox" id="markuplang"
name="computerskills" checked="checked“ />
<label for="markuplang"> קראתי את תנאי השימוש
</label>
108 / 116
Accessibility API-אודות ה
של המערכתused to communicate accessibility information about user interfaces to assistive technologies.
j.mp/aceess
Java accessiblity - j.mp/w3il59
Flash accessibility - j.mp/w3il60
109 / 116
Using the title attribute of the frame
and iframe elements
110 / 116
WAI-ARIA…
111 / 116
בעזרת checkboxיצירת : לא נגיש
span תמונה-ו
<p> <span onclick="toggleCheckbox('chkbox')"> <img src="unchecked.gif" id="chkbox" alt=""> Include Signature </span> </p>
j.mp/sdgtwq
(WAI-ARIAניתן להנגיש בעזרת )
112 / 116
לסיכום
112
113 / 116
ונגישים... אתרים יפים
nomensa.comaccessibleculture.org copious.co.uk
114 / 116
עזרה
accessifyforum.com
115 / 116
(בעברית) WCAG 2.0קראו את 1.
קרובים–שימרו את הכלים מהמצגת 2.
(הרשמו למקורות מידע. 3)
היו בקרותיים וחישבו על –בזמן התכנון והפיתוח . 4
נגישות
איך מתחילים
116 / 116
אייל סלע
eyal@isoc.org.il
@isociltech @eyalsela
!צרו קשר
Recommended