כלים ושיטות להנגשת אתרי אינטרנט על פי wcag 2.0
DESCRIPTION
כלים ושיטות להנגשת אתרי אינטרנט על פי WCAG 2.0. 23/2/2011. אייל סלע מנהל פרויקטים, איגוד האינטרנט הישראלי ומשרד ה- W3C הישראלי. תוכנית. מהי נגישות כלים 12 הקווים המנחים - WCAG 2.0 סיכום. איגוד האינטרנט הישראלי. שלוחת האיגוד הבינלאומי עמותה ללא מטרת רווח - PowerPoint PPT PresentationTRANSCRIPT
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
( WCAG)הנחיות להנגשת תכני אתרי אינטרנט 2.0
j.mp/w3av2
12 / 116
עקרונות4
קווים מנחים12
מדדי הצלחה
))שיטות
. / 3j mp w ada
13 / 116
A, AA, AAAשלוש רמות נגישות –
14 / 116
תקן ישראלי
בהכנה במכון התקנים•
2011ביקורת הציבור – •
WCAG 2.0מבוסס על •התאמה לסביבה הישראלית•
15 / 116
כלים
16 / 116
,HTMLכלי עזר: מנוע חיפוש לאלמנטים ב-CSS
דוגמא.... / 3 8 j mp w cmo
וגם –נגישות••Mobile•SVG
17 / 116
titleדוגמא – חיפוש
18 / 116
nagish.org.il
19 / 116
Techniques for WCAG 2.0 )single file(
. / 3 64j mp w il19
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)
. / 3 50j mp w il
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
טקסט חלופינגיש:
28 / 11628
www.google.com/recaptcha
ראיה
שמיעה
29 / 116
קישוט, עיצוב, תוכן בלתי־נראה –
יכולה להתעלם טכנולוגיה מסייעתבאופן שממנו
29
30 / 116
חלופות עבור מדיה 1.2מבוססת-זמן
)כתוביות לוידאו, או קול, תיאורים כתובים של צלילים משמעותיים, תיאורי אודיו למידע חזותי משמעותי(
31 / 116
Universal Subtitlesנגיש:
universalsubtitles.org
32 / 116
אין תמלול לפודקסטלא נגיש:
. / 65 7bit ly f m O
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> -הדגשה•
38 / 116
שימוש לא נכון בכותרותלא נגיש:
.lifehacker com
39 / 116
שימוש נכון בכותרותנגיש:
weboverhauls.com/dennislembree/
40 / 116
אין כותרות לא נגיש:
.Gov il
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
48 / 116
אי אפשר לדעת מה מסומן בלי לא נגיש: CSS
.initializr com
49 / 116
בר הבחנה1.4)הפרדת חזית מרקע – אי שימוש בצבע בלבד למשמעות,
גודל אותיות בר הגדלה, אי שימוש בתמונה כטקסט, ניגודיות(
50 / 116
שימוש בצבע
1 , ,עיבויהדגישו גם באמצעות
. / 3 8j mp w ad
שינוי רקעהוספת מסגרת
51 / 116
שימוש בצבע בלבד להבעת לא נגיש: משמעות
. .kavhutz wordpress com
52 / 116
ניגוד-צבעים4.5:1יחס-ניגוד של לפחות
(j.mp/cont123, j.mp/w3ad9 השתמשו בבודק ניגודיות: )
כי קשה לקרוא כאשר אין מספיק ניגודיות
53 / 116
ניגודיות נמוכה בכותרתלא נגיש:
bit.ly/h26CQh
54 / 116
כפתור לשינוי הניגודיות נגיש: באתר
nptech.org.il
55 / 116
כפתורים לשינוי הניגודיות נגיש: וגודל הטקסט
j.mp/accessbb
56 / 116
אפשרות להגדלת הטקסטנגיש:
guardian.co.uk
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
63 / 116
פוקוס נראה לעיןנגיש:
accessibletwitter.com
64 / 116
event handlersהשתמשו ב-מקבילים
j.mp/w3il54
65 / 116
אין תמיכה מלאה לא נגיש: במקלדת בתפריט עליון
whitehouse.gov
66 / 116
hover:הסתמכות על לא נגיש: בלבד + ניגודיות נמוכה
helppassiton.co.uk
67 / 116
גישה לניווט באמצעות נגיש: המקלדת
nagish.org.il
68 / 116
ספקו חלופה לגרירהנגיש:
j.mp/w3il55
מצב נגישות בוורדפרס
69 / 116
moseoverפועל רק עם לא נגיש:
j.mp/isl12
70 / 116
מלכודת מקלדתלא נגיש:
j.mp/werjtfs
71 / 116
מקשי קיצור בפייסבוקנגיש:
72 / 116
מספיק זמן2.2, אפשרות הארכה, עצירת תנועה session)הזהרה מפני סיום
ואיתחולה, עצירת עדכונים, אי הקצבת זמן לפעולה )אם אפשר( (
73 / 116
שליטה בעדכון אוטומטינגיש:
downrightnow.com
74 / 116
שמירת מידע בטופס בכדי אם נדרש אימות ( לפני הגשתוauthenticationהמשתמש )
75 / 116
בשירותים מקוונים של sessionהארכת ה-הבנק
76 / 116
מניעת התקפים2.3)עצירת תזוזה, מנעת הבהובים וחלקים זזים(
77 / 116
הבהובים בשניה )או שאינו עובר את 3לא יותר מ--הסף(
איזורים מהבהבים - קטנים-
78 / 116
סמל מהבהב – מעט ולא נגיש: בולט
gov.il
79 / 116
הרבה תנועה, צבעוני, לא נגיש: גדול
it.themarker.com/tmit/article/13885
80 / 116
כפתור עצירת תנועהנגיש:
www.leumi.co.il
81 / 116
כפתור עצירת תנועה נגיש:
nagish.org.il
82 / 116
קלות ניווט ומציאת מידע2.4)מספר דרכים לאותו תוכן, דפים מובנים עם כותרות נכונות,
קישורים ברורים, עקיפת בלוקים החוזרים על עצמם, סדר פוקוס נכון(
83 / 116
קישור ישיר לתוכן )גלוי או נגיש: מוסתר(
nagish.org.il
84 / 116
השתמשו בפירורי לחםנגיש:
education.gov.il
85 / 116
נגיש:מפת אתר
)מבוסס על סיפור אמיתי(
coi.gov.uk
86 / 116
טקסט בעל משמעות בקישורים
X לקריאת התוכנית המלאה לחץ כאן
Vקראו את התוכנית המלאה
87 / 116
כותרות ברורות....נגיש:
j.mp/ackdi
vs
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
95 / 116
איבוד פוקוס בניווט מקלדתלא נגיש:
ustream.tv
96 / 116
תמיכה בהזנה3.3הסבר מדויק לטעיות, הסבר על מה צריך להזין, ולידציה,
טקסט עזרה(
)בנייה חכמה של טפסים(
97 / 116
דרכי מניעת טעויות בטפסים
- ניתן לבטל הפעולההפיכּות •תצוגה מקדימהאישור - •
בדיקת הערכים שהוזנו–בדיקה •
98 / 116
טופס בנוי היטבנגיש:
webaim.org/contact
שגיאות מוצגות כקישורים בראש הטופס•מוסבר מה הטעות באופן מדויק••<label for=“x”>...CAPTCHאין •
)חסר: ולידציה לאימייל!!(•
99 / 116
נגיש:
www.data.gov.uk/user/register
100 / 116
זיהוי שגיאות והצגתן בראש הטופסנגיש:
farukat.es/contact/
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 - validator.w3.orgבודק תקינות •j.mp/w3add1 - CSSבודק תקינות •
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נגישות
איך מתחילים