1102/2/32 כלים ושיטות להנגשת אתרי אינטרנט על פי 0. 2 WCAG אייל סלע מנהל פרויקטים, איגוד האינטרנט הישראלי ומשרד ה- W 3 C הישראלי 611 / 1
תוכנית. . . • • מהי נגישות כלים 21 הקווים המנחים - 0. 2 WCAG סיכום 611 / 2
איגוד האינטרנט הישראלי שלוחת האיגוד הבינלאומי עמותה ללא מטרת רווח פועל לקידום האינטרנט והטמעתו בישראל כתשתית טכנולוגית, מחקרית, חינוכית, חברתית ועסקית 611 / 3
W 3 C • ארגון בינלאומי • כ-053 ארגונים • פורום ניטראלי ליצירת תקני הווב • משימה: להוביל את הרשת למיצוי הפוטנציאל על ידי פיתוח פרוטוקולים וקווים מנחים שיאפשרו את צמיחתה לטווח ארוך. 611 / 4 4
מהי נגישות 611 / 5
מוגבלויות המשפיעות על השימוש באינטרנט: עיוורון )קוראי מסך, ברייל( ראייה לקויה )מגדילי מסך( עיוורון צבעים שמיעה קוגניציה מוטוריקה )עזרי ניווט, אי שימוש בעכבר( 611 / 6
מהו אתר נגיש? אתר המאפשר לאנשים עם מוגבלות לגלוש באותה רמה של יעילות והנאה ככל הגולשים. 611 / 7
נגישות זה גם. . ) ROI יותר קהל, יותר מצליחים להשתמש( ) SEO פשוט ככה. . . ( שימושיות )תת קבוצה( ) Mobile יש חפיפה בין צרכי המשתמשים( מקצועיות )מרגישים את ההבדל( חוק )בקרוב. . . ( שוק מתרחב )עלייה בתוחלת החיים( 611 / 8
אה כן. . . אנשים 611 / 9
על מה אנחנו מדברים? 611 / 01
הנחיות להנגשת תכני אתרי אינטרנט 0. 2 ) (WCAG 2 j. mp/w 3 av 611 / 11
4 עקרונות 21 קווים מנחים מדדי הצלחה ( ( שיטות j. mp/w 3 ada 611 / 21
שלוש רמות נגישות – AAA , A 611 / 31
תקן ישראלי • • בהכנה במכון התקנים ביקורת הציבור – 1102 מבוסס על 0. 2 WCAG התאמה לסביבה הישראלית 611 / 41
כלים 611 / 51
כלי עזר: מנוע חיפוש לאלמנטים ב- HTML, CSS וגם – • נגישות • Mobile • SVG דוגמא. . . 8 j. mp/w 3 cmo 611 / 61
דוגמא – חיפוש title 611 / 71
nagish. org. il 18 / 116
Techniques for WCAG 2. 0 (single file) j. mp/w 3 il 64 19 / 116
0. 2 WCAG 21 הקווים המנחים 611 / 02 02
21 הקווים המנחים 1. תפיסה 1. 1 חלופה טקסטואלית 2. 1 מדיה מבוססת־זמן 3. 1 גמישות 4. 1 הבחנה 2. תפעול 1. 2 נגישות מהמקלדת 2. 2 משך־זמן מספיק 3. 2 מניעת התקפים אפילפטיים 4. 2 ניווט נוח 611 / 12 3. נהירות 1. 3 קריאות 2. 3 תפקוד באופן צפוי 3. 3 עזרה בהזנת קלט 4. יציבות 1. 4 תאימות
עקרון 1: נתפס (perceive) ניתן 'לתפוס' מבחינה חושית . את תוכן האתר it can't be invisible to all of their senses 22 / 116
1. 1 חלופה טקסטואלית )תיאור תמונה, פקדים בטפסים, חלופה ל- ( CAPTCHA 05 j. mp/w 3 il 611 / 32
alt- נגיש: שימוש ב <img src="newsletter. gif" alt="Free newsletter. Get free recipes, news, and more. Learn more. " /> (vs title ) j. mp/w 3 il 51 24 / 116
לא נגיש: טקסט alt חסר משמעות 52 611 / 52
Label element or title attribute : נגיש <label for="search. Term">Search for: </label> <input id="search. Term" type="text" size="30" value="" name="search. Term"> . . . או לפחות <select title="Search in" id="scope"> … </select> j. mp/w 3 il 52 26 / 116
נגיש: טקסט חלופי 611 / 72
ראיה שמיעה www. google. com/recaptcha 28 / 116
קישוט, עיצוב, תוכן בלתי־נראה – באופן שטכנולוגיה מסייעת יכולה להתעלם ממנו 611 / 92 92
2. 1 חלופות עבור מדיה מבוססת-זמן )כתוביות לוידאו, או קול, תיאורים כתובים של צלילים משמעותיים, תיאורי אודיו למידע חזותי משמעותי( 611 / 03
Universal Subtitles : נגיש universalsubtitles. org 31 / 116
לא נגיש: אין תמלול לפודקסט 611 / 23 bit. ly/f 65 m 7 O
נגיש: יעוץ משפטי מבוסס וידאו - בשפת הסימנים. 611 / 33 - radlegalservices. org. uk/bsl
3. 1 תוכן הניתן להתאמה )תגיות נכונות וסמנטיות, הפרדת תוכן מעיצוב, קרבה בין אלמנטים קשורים, זיהוי כותרות ורשימות( 611 / 43
נגיש: הפרידו תוכן מעיצוב אותו אתר, ללא CSS • HTML לתוכן • CSS לעיצוב • עיצוב ללא טבלאות 611 / 53 דוגמא. . . 321 j. mp/dkrg
נגיש: דוגמא – שינוי עיצוב standards. co. il csszengarden. com 36 / 116
נגיש: אלמנטים סמנטיים • • כותרות - >6 <h 1> – <h רשימות ותפריטים - > <ul ו > <ui פסקה - > <p הדגשה - > <strong 611 / 73
לא נגיש: שימוש לא נכון בכותרות 611 / 83 lifehacker. com
נגיש: שימוש נכון בכותרות weboverhauls. com/dennislembree/ 39 / 116
לא נגיש: אין כותרות 611 / 04 Gov. il
Failure Example 1: A heading : לא נגיש used only for visual effect <p>Interested in learning more? Write to us at</p> <h 4>3333 Third Avenue, Suite 300 · New York City</h 4> <p>And we'll send you the complete informational packet absolutely Free!</p> <h 1>Study on the Use of Heading Elements in Web Pages</h 1> <h 3>Joe Jones and Mary Smith<h 3> <h 4>March 14, 2006</h 4> <h 2>Abstract</h 2> <p>A study was conducted in early 2006 …</p> 41 / 116
קישורים ברורים ודילוג לתוכן a span. hide { height: 1 px; width: 1 px; position: absolute; overflow: hidden; top: -10 px; } 42 / 116
- תגיות חדשות לשיפור סמנטיקה ב HTML 5 <header> <section> <footer> <nav> <article> <aside> … 43 / 116
הדרכה בהבנת תוכן ובהפעלתו לא תסתמך רק על המאפיינים החושיים של מרכיבים, כגון צורה, גודל, מיקום חזותי, כיוון או צליל. 611 / 44 44
לא נגיש: תגיות – העברת משמעות רק בעיצוב בלי CSS 611 / 54
המנעו מ: "הקטגוריות שבצד ימין. . " "לחצו על הכפתור העגול. . 611 / 64 64
נגיש: מידע המועבר בצבע בלבד – נמצא גם בטקסט ומוסתר בעזרת CSS 611 / 74 caniuse. com/datalist
לא נגיש: אי אפשר לדעת מה מסומן בלי CSS 611 / 84 initializr. com
4. 1 בר הבחנה )הפרדת חזית מרקע – אי שימוש בצבע בלבד למשמעות, גודל אותיות בר הגדלה, אי שימוש בתמונה כטקסט, ניגודיות( 611 / 94
שימוש בצבע הדגישו גם באמצעות עיבוי, הוספת , 1שינוי רקע מסגרת 8 j. mp/w 3 ad 611 / 05
לא נגיש: שימוש בצבע בלבד להבעת משמעות 611 / 15 kavhutz. wordpress. com
ניגוד-צבעים יחס-ניגוד של לפחות 1: 5. 4 כי קשה לקרוא כאשר אין מספיק ניגודיות )השתמשו בבודק ניגודיות: 9 (j. mp/cont 123 , j. mp/w 3 ad 611 / 25
לא נגיש: ניגודיות נמוכה בכותרת 611 / 35 bit. ly/h 26 CQh
נגיש: כפתור לשינוי הניגודיות באתר 611 / 45 nptech. org. il
נגיש: כפתורים לשינוי הניגודיות וגודל הטקסט 611 / 55 j. mp/accessbb
נגיש: אפשרות להגדלת הטקסט 611 / 65 guardian. co. uk
Or Just fluied : נגיש 57 / 116
שליטה בשמע: אם יש מוסיקה אוטומטי )ליותר מ-3 שניות( – ניתן להפסיק /להחליש דוגמא: 611 / 85
לא מצאתי 611 / 95
עקרון 2: ניתן להפעלה . המרכיבים והניווט ניתנים להפעלה the interface cannot require interaction that a user cannot perform 60 / 116
1. 2 תפקוד מלא ממקלדת )הגעה לכל הניווט, אין מלכודות מקלדת( 611 / 16
לא נגיש: במעבר מקלדת – אי אפשר לראות איפה הפוקוס 611 / 26 businessinsider. com
נגיש: פוקוס נראה לעין accessibletwitter. com 63 / 116
event handlers- השתמשו ב מקבילים j. mp/w 3 il 54 64 / 116
לא נגיש: אין תמיכה מלאה במקלדת בתפריט עליון 611 / 56 whitehouse. gov
לא נגיש: הסתמכות על : hover בלבד + ניגודיות נמוכה 611 / 66 helppassiton. co. uk
נגיש: גישה לניווט באמצעות המקלדת 611 / 76 nagish. org. il
נגיש: ספקו חלופה לגרירה מצב נגישות בוורדפרס 611 / 86 55 j. mp/w 3 il
moseover לא נגיש: פועל רק עם j. mp/isl 12 69 / 116
לא נגיש: מלכודת מקלדת 611 / 07 j. mp/werjtfs
נגיש: מקשי קיצור בפייסבוק 611 / 17
2. 2 מספיק זמן )הזהרה מפני סיום , session אפשרות הארכה, עצירת תנועה ואיתחולה, עצירת עדכונים, אי הקצבת זמן לפעולה )אם אפשר( ( 611 / 27
נגיש: שליטה בעדכון אוטומטי 611 / 37 downrightnow. com
שמירת מידע בטופס בכדי אם נדרש אימות המשתמש ) (authentication לפני הגשתו 611 / 47
הארכת ה- session בשירותים מקוונים של הבנק 611 / 57
3. 2 מניעת התקפים )עצירת תזוזה, מנעת הבהובים וחלקים זזים( 611 / 67
לא יותר מ-3 הבהובים בשניה )או שאינו עובר את הסף( - איזורים מהבהבים - קטנים 611 / 77
נגיש: סמל מהבהב – מעט ולא בולט 611 / 87 gov. il
לא נגיש: הרבה תנועה, צבעוני, גדול it. themarker. com/tmit/article/13885 79 / 116
נגיש: כפתור עצירת תנועה 611 / 08 www. leumi. co. il
נגיש: כפתור עצירת תנועה 611 / 18 nagish. org. il
4. 2 קלות ניווט ומציאת מידע )מספר דרכים לאותו תוכן, דפים מובנים עם כותרות נכונות, קישורים ברורים, עקיפת בלוקים החוזרים על עצמם, סדר פוקוס נכון( 611 / 28
נגיש: קישור ישיר לתוכן )גלוי או מוסתר( 611 / 38 nagish. org. il
נגיש: השתמשו בפירורי לחם 611 / 48 education. gov. il
נגיש: מפת אתר )מבוסס על סיפור אמיתי( 611 / 58 coi. gov. uk
טקסט בעל משמעות בקישורים X לקריאת התוכנית המלאה לחץ כאן V קראו את התוכנית המלאה 611 / 68
נגיש: כותרות ברורות. . vs 611 / 78 j. mp/ackdi
עקרון 3: ניתן להבנה הטקסט ניתן לקראה ולהבנה the content or operation cannot be beyond their understanding 88 / 116
1. 3 טקסט בר הבנה )רמת הטקסט, זיהוי השפה בדף כולו ובחלקיו, פירוש קיצורים וז'רגון( 611 / 98
נגיש: זיהוי שפת הטקסט <html lang="fr"> <html xml: lang="he”> 90 / 116
)למעט טקסט משפטי( 611 / 19
נגיש: הרחבת קיצורים <p>Tasini <abbr title="and others">et al. </abbr> <abbr title="versus">v. </abbr> The New York Times 92 / 116
2. 3 תפעול ותצוגה צפויים )אי שינוי ההקשר בפוקוס או בלי שהמשתמש ביקש, ניווט עקבי( 611 / 39
נגיש: לא לשנות את העמוד באופן משמעותי בגלל פוקוס על אלמנט 611 / 49 w 3 c. org
לא נגיש: איבוד פוקוס בניווט מקלדת 611 / 59 ustream. tv
3. 3 תמיכה בהזנה הסבר מדויק לטעיות, הסבר על מה צריך להזין, ולידציה, טקסט עזרה( )בנייה חכמה של טפסים( 611 / 69
דרכי מניעת טעויות בטפסים • הפיכות - ניתן לבטל הפעולה • אישור - תצוגה מקדימה • בדיקה – בדיקת הערכים שהוזנו 611 / 79
נגיש: טופס בנוי היטב • • שגיאות מוצגות כקישורים בראש הטופס מוסבר מה הטעות באופן מדויק >” <label for=“x אין . . . CAPTCH • )חסר: ולידציה לאימייל!!( 611 / 89 webaim. org/contact
: נגיש www. data. gov. uk/user/regist 99 / 116
נגיש: זיהוי שגיאות והצגתן בראש הטופס 611 / 001 / farukat. es/contact
נגיש: עזרה בעת זיהוי טעות בטופס הצעת תיקון אפשרי 611 / 101 los. direct. gov. uk
עזרה קישור לטקסט עזרה - הצגת דוגמאות לערכים נכונים 611 / 201
עקרון 4 - יציבות תאימות מרבית עם דפדפנים, תוכנות וכדומה as technologies and user agents evolve, the content should remain accessible 103 / 116
1. 4 Parsing )תג פתיחה וסגירה, קינון נכון, אי כפילות IDs are , attributes (unique לכתוב קוד תקין 611 / 401
בדקו את תקינות ה- HTML וה- CSS • בודק תקינות validator. w 3. org - HTML • בודק תקינות j. mp/w 3 add 1 - CSS 611 / 501
2. 4 שם-תפקיד-ערך )שימוש בפקדים רגילים פותר את זה( 611 / 601
: לדוגמה " • שם: "קראתי את תנאי השימוש checkbox : • תפקיד . " • ערך: "מסומן <input type="checkbox" id="markuplang" name="computerskills" checked="checked“ /> <label for="markuplang"> קראתי את תנאי השימוש </label> 107 / 116
Accessibility API - אודות ה של המערכת used to communicate accessibility information about user interfaces to assistive technologies. Java accessiblity - j. mp/w 3 il 59 Flash accessibility - j. mp/w 3 il 60 j. mp/aceess 108 / 116
Using the title attribute of the frame and iframe elements 109 / 116
WAI-ARIA… 110 / 116
בעזרת checkbox לא נגיש: יצירת ו-תמונה span (WAI-ARIA )ניתן להנגיש בעזרת <p> <span onclick="toggle. Checkbox('chkbox')"> <img src="unchecked. gif" id="chkbox" alt=""> Include Signature </span> </p> j. mp/sdgtwq 111 / 116
לסיכום 611 / 211
אתרים יפים. . . ונגישים accessibleculture. org nomensa. com copious. co. uk 113 / 116
עזרה accessifyforum. com 114 / 116
איך מתחילים 1. קראו את 0. 2 ) WCAG בעברית( 2. שימרו את הכלים מהמצגת – קרובים )3. הרשמו למקורות מידע( 4. בזמן התכנון והפיתוח – היו בקרותיים וחישבו על נגישות 611 / 511
ת ו ד ה ! צרו קשר אייל סלע eyal@isoc. org. il @isociltech @eyalsela 116 / 116
Скачать презентацию 1102 2 32 כלים ושיטות להנגשת אתרי אינטרנט על
5d694b0459f94a2b0e808c296493073c.ppt