116
1 / 116 כלים ושיטות להנגשת אתרי אינטרנט על פיWCAG 2.0 אייל סלע מנהל פרויקטים, איגוד האינטרנט הישראלי ומשרד ה- W3C הישראלי23/2/2011

כלים ושיטות להנגשת אתרי אינטרנט על פי WCAG 2.0

Embed Size (px)

DESCRIPTION

http://www.w3c.org.il

Citation preview

Page 1: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

1 / 116

כלים ושיטות להנגשת אתרי אינטרנט

WCAG 2.0על פי

אייל סלע

איגוד האינטרנט הישראלי , מנהל פרויקטיםהישראלי W3C-ומשרד ה

23/2/2011

Page 2: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

2 / 116

...תוכנית

מהי נגישות•

כלים•

WCAG 2.0 -הקווים המנחים 12•

סיכום•

Page 3: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

3 / 116

איגוד האינטרנט הישראלישלוחת האיגוד הבינלאומי

עמותה ללא מטרת רווח

פועל לקידום האינטרנט והטמעתו בישראל כתשתית

חברתית ועסקית, חינוכית, מחקרית, טכנולוגית

Page 4: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

4 / 1164

W3C

ארגון בינלאומי •

ארגונים 350-כ•

פורום ניטראלי ליצירת תקני הווב•

:משימה•

להוביל את הרשת למיצוי הפוטנציאל על ידי פיתוח

פרוטוקולים וקווים מנחים שיאפשרו את צמיחתה .לטווח ארוך

Page 5: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

5 / 116

מהי

נגישות

Page 6: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

6 / 116

:מוגבלויות המשפיעות על השימוש באינטרנט

(ברייל, קוראי מסך) עיוורון

(מגדילי מסך)ראייה לקויה

עיוורון צבעים

שמיעה

קוגניציה

(אי שימוש בעכבר, עזרי ניווט) מוטוריקה

Page 7: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

7 / 116

?מהו אתר נגיש

אתר המאפשר לאנשים עם מוגבלות לגלוש באותה רמה

.של יעילות והנאה ככל הגולשים

Page 8: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

8 / 116

....נגישות זה גםROI (יותר מצליחים להשתמש, יותר קהל)

SEO (פשוט ככה)...

(תת קבוצה) שימושיות

Mobile (יש חפיפה בין צרכי המשתמשים)

(מרגישים את ההבדל) מקצועיות

...(בקרוב)חוק

(עלייה בתוחלת החיים)שוק מתרחב

Page 9: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

9 / 116

...אה כן

אנשים

Page 10: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

10 / 116

?על מה אנחנו מדברים

Page 11: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

11 / 116

2.0 (WCAG)הנחיות להנגשת תכני אתרי אינטרנט

j.mp/w3av2

Page 12: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

12 / 116

עקרונות 4

קווים מנחים 12

מדדי הצלחה

))

שיטות

ada3j.mp/w

Page 13: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

13 / 116

A ,AA ,AAA–שלוש רמות נגישות

Page 14: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

14 / 116

תקן ישראלי

בהכנה במכון התקנים•

2011–ביקורת הציבור •

WCAG 2.0מבוסס על •

התאמה לסביבה הישראלית•

Page 15: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

15 / 116

כלים

Page 16: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

16 / 116

HTML, CSS-מנוע חיפוש לאלמנטים ב: כלי עזר

...דוגמא

8 cmo3j.mp/w

–וגם

נגישות•

•Mobile

•SVG

Page 17: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

17 / 116

titleחיפוש –דוגמא

Page 18: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

18 / 116

nagish.org.il

Page 19: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

19 / 116

Techniques for WCAG 2.0 (single file)

64il3j.mp/w19

Page 20: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

20 / 116

WCAG 2.0

הקווים המנחים 12

20

Page 21: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

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

Page 22: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

22 / 116

נתפס: 1עקרון

( perceive)מבחינה חושית ' לתפוס'ניתן

.את תוכן האתר

it can't be invisible to all of their senses

Page 23: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

23 / 116

חלופה טקסטואלית 1.1(CAPTCHA-חלופה ל, פקדים בטפסים, תיאור תמונה)

50il3j.mp/w

Page 24: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

24 / 116

alt-שימוש ב: נגיש

<img src="newsletter.gif" alt="Free newsletter. Get free recipes, news, and more. Learn more." />

(vs title)

j.mp/w3il51

Page 25: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

25 / 116

חסר משמעות altטקסט : לא נגיש

25

Page 26: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

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

Page 27: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

27 / 116

טקסט חלופי: נגיש

Page 28: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

28 / 11628

www.google.com/recaptcha

ראיה

שמיעה

Page 29: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

29 / 116

–תוכן בלתי־נראה , עיצוב, קישוט

יכולה להתעלם ממנו טכנולוגיה מסייעתבאופן ש

29

Page 30: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

30 / 116

זמן-חלופות עבור מדיה מבוססת 1.2תיאורים כתובים של צלילים , או קול, כתוביות לוידאו)

(תיאורי אודיו למידע חזותי משמעותי, משמעותיים

Page 31: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

31 / 116

Universal Subtitles: נגיש

universalsubtitles.org

Page 32: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

32 / 116

אין תמלול לפודקסט: לא נגיש

O7m65bit.ly/f

Page 33: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

33 / 116

-יעוץ משפטי מבוסס וידאו : נגיש

.בשפת הסימנים

radlegalservices.org.uk/bsl-advice

Page 34: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

34 / 116

תוכן הניתן להתאמה 1.3קרבה בין , הפרדת תוכן מעיצוב, תגיות נכונות וסמנטיות)

(זיהוי כותרות ורשימות, אלמנטים קשורים

Page 35: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

35 / 116

הפרידו תוכן מעיצוב: נגיש

j.mp/dkrg123

...דוגמא

•HTML לתוכן

•CSS לעיצוב

עיצוב ללא טבלאות •

, אותו אתר

CSSללא

Page 36: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

36 / 116

שינוי עיצוב–דוגמא : נגיש

standards.co.il csszengarden.com

Page 37: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

37 / 116

אלמנטים סמנטיים: נגיש

– <h1> - כותרות• <h6>

<ui>ו <ul> -רשימות ותפריטים •

<p> - פסקה•

<strong>- הדגשה•

Page 38: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

38 / 116

שימוש לא נכון בכותרות: לא נגיש

lifehacker.com

Page 39: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

39 / 116

שימוש נכון בכותרות: נגיש

weboverhauls.com/dennislembree/

Page 40: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

40 / 116

אין כותרות : לא נגיש

Gov.il

Page 41: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

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>

Page 42: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

42 / 116

קישורים ברורים ודילוג לתוכן

a span.hide {

height: 1px;

width: 1px;

position: absolute;

overflow: hidden;

top: -10px;

}

Page 43: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

43 / 116

-תגיות חדשות לשיפור סמנטיקה ב

HTML5

<header>

<section>

<footer>

<nav>

<article>

<aside>

Page 44: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

44 / 116

הדרכה בהבנת תוכן ובהפעלתו לא תסתמך רק על

, גודל, כגון צורה, המאפיינים החושיים של מרכיבים.כיוון או צליל, מיקום חזותי

44

Page 45: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

45 / 116

העברת משמעות רק בעיצוב–תגיות : לא נגיש

בלי

CSS

Page 46: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

46 / 116

:המנעו מ...." בצד ימיןהקטגוריות ש"

.... כפתור העגוללחצו על ה"

46

Page 47: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

47 / 116

נמצא גם –מידע המועבר בצבע בלבד :נגיש

CSSבטקסט ומוסתר בעזרת

caniuse.com/datalist

Page 48: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

48 / 116

CSSאי אפשר לדעת מה מסומן בלי : לא נגיש

initializr.com

Page 49: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

49 / 116

בר הבחנה 1.4גודל , אי שימוש בצבע בלבד למשמעות–הפרדת חזית מרקע )

(ניגודיות, אי שימוש בתמונה כטקסט, אותיות בר הגדלה

Page 50: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

50 / 116

שימוש בצבע

1, ,עיבויהדגישו גם באמצעות

8ad3j.mp/w

שינוי רקעהוספת מסגרת

Page 51: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

51 / 116

שימוש בצבע בלבד להבעת משמעות: לא נגיש

kavhutz.wordpress.com

Page 52: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

52 / 116

צבעים-ניגוד4.5:1ניגוד של לפחות -יחס

(j.mp/cont123 ,j.mp/w3ad9 השתמשו בבודק ניגודיות : )

כי קשה לקרוא כאשר אין מספיק

ניגודיות

Page 53: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

53 / 116

ניגודיות נמוכה בכותרת :לא נגיש

CQh26bit.ly/h

Page 54: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

54 / 116

כפתור לשינוי הניגודיות באתר: נגיש

nptech.org.il

Page 55: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

55 / 116

כפתורים לשינוי הניגודיות וגודל : נגיש

הטקסט

j.mp/accessbb

Page 56: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

56 / 116

אפשרות להגדלת הטקסט: נגיש

guardian.co.uk

Page 57: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

57 / 116

Or Just fluied: נגיש

Page 58: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

58 / 116

3-ליותר מ)אם יש מוסיקה אוטומטי :שליטה בשמע

להחליש/ניתן להפסיק –( שניות

:דוגמא

Page 59: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

59 / 116

לא מצאתי

Page 60: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

60 / 116

ניתן להפעלה: 2עקרון .המרכיבים והניווט ניתנים להפעלה

the interface cannot require

interaction that a user cannot perform

Page 61: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

61 / 116

תפקוד מלא ממקלדת 2.1(אין מלכודות מקלדת, הגעה לכל הניווט)

Page 62: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

62 / 116

אי אפשר –במעבר מקלדת : לא נגיש

לראות איפה הפוקוס

businessinsider.com

Page 63: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

63 / 116

פוקוס נראה לעין: נגיש

accessibletwitter.com

Page 64: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

64 / 116

event handlers-השתמשו ב

מקבילים

j.mp/w3il54

Page 65: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

65 / 116

אין תמיכה מלאה במקלדת : לא נגיש

בתפריט עליון

whitehouse.gov

Page 66: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

66 / 116

בלבד hover:הסתמכות על : לא נגיש

ניגודיות נמוכה+

helppassiton.co.uk

Page 67: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

67 / 116

גישה לניווט באמצעות המקלדת: נגיש

nagish.org.il

Page 68: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

68 / 116

ספקו חלופה לגרירה: נגיש

j.mp/w3il55

מצב נגישות בוורדפרס

Page 69: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

69 / 116

moseoverפועל רק עם : לא נגיש

12j.mp/isl

Page 70: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

70 / 116

מלכודת מקלדת: לא נגיש

j.mp/werjtfs

Page 71: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

71 / 116

מקשי קיצור בפייסבוק: נגיש

Page 72: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

72 / 116

מספיק זמן 2.2עצירת תנועה , אפשרות הארכה, sessionהזהרה מפני סיום )

( (אם אפשר)אי הקצבת זמן לפעולה , עצירת עדכונים, ואיתחולה

Page 73: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

73 / 116

שליטה בעדכון אוטומטי: נגיש

downrightnow.com

Page 74: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

74 / 116

שמירת מידע בטופס בכדי אם נדרש אימות המשתמש

(authentication )לפני הגשתו

Page 75: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

75 / 116

בשירותים מקוונים של session-הארכת ה

הבנק

Page 76: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

76 / 116

מניעת התקפים 2.3(מנעת הבהובים וחלקים זזים, עצירת תזוזה)

Page 77: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

77 / 116

(או שאינו עובר את הסף)הבהובים בשניה 3-לא יותר מ-

קטנים -איזורים מהבהבים -

Page 78: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

78 / 116

מעט ולא בולט–סמל מהבהב : נגיש

gov.il

Page 79: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

79 / 116

גדול, צבעוני, הרבה תנועה: לא נגיש

13885it.themarker.com/tmit/article/

Page 80: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

80 / 116

כפתור עצירת תנועה: נגיש

www.leumi.co.il

Page 81: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

81 / 116

כפתור עצירת תנועה : נגיש

nagish.org.il

Page 82: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

82 / 116

קלות ניווט ומציאת מידע 2.4, דפים מובנים עם כותרות נכונות, מספר דרכים לאותו תוכן)

סדר פוקוס , עקיפת בלוקים החוזרים על עצמם, קישורים ברורים

(נכון

Page 83: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

83 / 116

גלוי או )קישור ישיר לתוכן : נגיש

(מוסתר

nagish.org.il

Page 84: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

84 / 116

השתמשו בפירורי לחם: נגיש

education.gov.il

Page 85: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

85 / 116

:נגיש

מפת אתר(מבוסס על סיפור אמיתי)

coi.gov.uk

Page 86: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

86 / 116

טקסט בעל משמעות בקישורים

X לחץ כאןלקריאת התוכנית המלאה

V התוכנית המלאהקראו את

Page 87: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

87 / 116

....כותרות ברורות: נגיש

j.mp/ackdi

vs

Page 88: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

88 / 116

ניתן להבנה :3עקרון הטקסט ניתן לקראה ולהבנה

the content or operation cannot be

beyond their understanding

Page 89: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

89 / 116

טקסט בר הבנה 3.1פירוש קיצורים , זיהוי השפה בדף כולו ובחלקיו, רמת הטקסט)

(רגון'וז

Page 90: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

90 / 116

זיהוי שפת הטקסט: נגיש

<html lang="fr">

<html xml:lang="he”>

Page 91: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

91 / 116

(למעט טקסט משפטי)

Page 92: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

92 / 116

הרחבת קיצורים: נגיש

<p>Tasini <abbr title="and others">et al.</abbr> <abbr title="versus">v.</abbr> The New York Times

Page 93: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

93 / 116

תפעול ותצוגה צפויים 3.2(ניווט עקבי, אי שינוי ההקשר בפוקוס או בלי שהמשתמש ביקש)

Page 94: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

94 / 116

לא לשנות את העמוד באופן משמעותי : נגיש

בגלל פוקוס על אלמנט

w3c.org

Page 95: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

95 / 116

איבוד פוקוס בניווט מקלדת: לא נגיש

ustream.tv

Page 96: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

96 / 116

תמיכה בהזנה 3.3טקסט , ולידציה, הסבר על מה צריך להזין, הסבר מדויק לטעיות

(עזרה

(בנייה חכמה של טפסים)

Page 97: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

97 / 116

דרכי מניעת טעויות בטפסים

ניתן לבטל הפעולה - הפיכּות•

תצוגה מקדימה -אישור •

בדיקת הערכים שהוזנו –בדיקה •

Page 98: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

98 / 116

טופס בנוי היטב: נגיש

webaim.org/contact

שגיאות מוצגות כקישורים בראש הטופס•

מוסבר מה הטעות באופן מדויק•

•<label for=“x”>

...CAPTCHאין •

!!(ולידציה לאימייל: חסר)•

Page 99: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

99 / 116

:נגיש

www.data.gov.uk/user/register

Page 100: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

100 / 116

זיהוי שגיאות והצגתן בראש הטופס: נגיש

farukat.es/contact/

Page 101: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

101 / 116

עזרה בעת זיהוי טעות בטופס: נגיש

הצעת תיקון אפשרי

los.direct.gov.uk

Page 102: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

102 / 116

עזרה

קישור לטקסט עזרה-

הצגת דוגמאות לערכים נכונים-

Page 103: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

103 / 116

יציבות - 4עקרון תוכנות וכדומה, תאימות מרבית עם דפדפנים

as technologies and user agents evolve,

the content should remain accessible

Page 104: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

104 / 116

4.1 Parsing attributes ,IDs areאי כפילות , קינון נכון, תג פתיחה וסגירה)

unique)

לכתוב קוד תקין

Page 105: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

105 / 116

CSS-וה HTML-בדקו את תקינות הHTML - .org3validator.wבודק תקינות •

CSS-1add3j.mp/wבודק תקינות •

Page 106: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

106 / 116

ערך-תפקיד-שם 4.2(שימוש בפקדים רגילים פותר את זה)

Page 107: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

107 / 116

: לדוגמה

"קראתי את תנאי השימוש: "שם•

checkbox: תפקיד•

".מסומן: "ערך•

<input type="checkbox" id="markuplang"

name="computerskills" checked="checked“ />

<label for="markuplang"> קראתי את תנאי השימוש

</label>

Page 108: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

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

Page 109: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

109 / 116

Using the title attribute of the frame

and iframe elements

Page 110: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

110 / 116

WAI-ARIA…

Page 111: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

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ניתן להנגיש בעזרת )

Page 112: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

112 / 116

לסיכום

112

Page 113: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

113 / 116

ונגישים... אתרים יפים

nomensa.comaccessibleculture.org copious.co.uk

Page 114: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

114 / 116

עזרה

accessifyforum.com

Page 115: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

115 / 116

(בעברית) WCAG 2.0קראו את 1.

קרובים–שימרו את הכלים מהמצגת 2.

(הרשמו למקורות מידע. 3)

היו בקרותיים וחישבו על –בזמן התכנון והפיתוח . 4

נגישות

איך מתחילים

Page 116: כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0

116 / 116

אייל סלע

[email protected]

@isociltech @eyalsela

!צרו קשר