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נגישות

איך מתחילים

116 / 116

אייל סלע

eyal@isoc.org.il@isociltech @eyalsela

תודה צרו קשר!