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

‫1102/2/32‬ ‫כלים ושיטות להנגשת אתרי אינטרנט‬ ‫על פי 0.2 ‪WCAG‬‬ ‫אייל סלע‬ ‫מנהל פרויקטים, איגוד האינטרנט הישראלי‬ ‫ומשרד ה-‪ W3C‬הישראלי‬ ‫611 / 1‬

‫תוכנית...‬ ‫מהי נגישות‬ ‫•‬ ‫כלים‬ ‫•‬‫21 הקווים המנחים - 0.2 ‪WCAG‬‬ ‫•‬ ‫סיכום‬ ‫•‬ ‫611 / 2‬

‫איגוד האינטרנט הישראלי‬ ‫שלוחת האיגוד הבינלאומי‬ ‫עמותה ללא מטרת רווח‬‫פועל לקידום האינטרנט והטמעתו בישראל כתשתית‬ ‫טכנולוגית, מחקרית, חינוכית, חברתית ועסקית‬ ‫611 / 3‬

‫‪W3C‬‬ ‫• ארגון בינלאומי‬ ‫• כ-053 ארגונים‬ ‫• פורום ניטראלי ליצירת תקני הווב‬ ‫• משימה:‬‫להוביל את הרשת למיצוי הפוטנציאל על ידי פיתוח‬‫פרוטוקולים וקווים מנחים שיאפשרו את צמיחתה‬ ‫לטווח ארוך.‬ ‫4‬ ‫611 / 4‬

‫מהי‬‫נגישות‬ ‫611 / 5‬

‫מוגבלויות המשפיעות על השימוש באינטרנט:‬ ‫(קוראי מסך, ברייל)‬ ‫עיוורון‬ ‫ראייה לקויה (מגדילי מסך)‬ ‫עיוורון צבעים‬ ‫שמיעה‬ ‫קוגניציה‬ ‫מוטוריקה (עזרי ניווט, אי שימוש בעכבר)‬ ‫611 / 6‬

‫מהו אתר נגיש?‬‫אתר המאפשר לאנשים עם מוגבלות לגלוש באותה רמה‬ ‫של יעילות והנאה ככל הגולשים.‬ ‫611 / 7‬

‫נגישות זה גם....‬ ‫(יותר קהל, יותר מצליחים להשתמש)‬ ‫‪ROI‬‬ ‫‪( SEO‬פשוט ככה...)‬ ‫שימושיות (תת קבוצה)‬‫‪( Mobile‬יש חפיפה בין צרכי המשתמשים)‬ ‫מקצועיות (מרגישים את ההבדל)‬ ‫חוק (בקרוב...)‬ ‫שוק מתרחב (עלייה בתוחלת החיים)‬ ‫611 / 8‬

‫אה כן...‬‫אנשים‬ ‫611 / 9‬

‫על מה אנחנו מדברים?‬ ‫611 / 01‬

‫הנחיות להנגשת תכני אתרי אינטרנט 0.2 )‪(WCAG‬‬‫2‪j.mp/w3av‬‬ ‫611 / 11‬

‫4 עקרונות‬ ‫‪‬‬ ‫21 קווים מנחים‬ ‫‪‬‬ ‫מדדי הצלחה‬ ‫)‪)‬‬ ‫שיטות‬‫‪j.mp/w3ada‬‬ ‫611 / 21‬

‫שלוש רמות נגישות – ‪AAA ,AA ,A‬‬ ‫611 / 31‬

‫תקן ישראלי‬ ‫בהכנה במכון התקנים‬ ‫•‬ ‫ביקורת הציבור – 1102‬ ‫•‬ ‫מבוסס על 0.2 ‪WCAG‬‬ ‫•‬‫התאמה לסביבה הישראלית‬ ‫•‬ ‫611 / 41‬

‫כלים‬ ‫611 / 51‬

‫כלי עזר: מנוע חיפוש לאלמנטים ב-‪HTML, CSS‬‬ ‫וגם –‬ ‫• נגישות‬ ‫• ‪Mobile‬‬ ‫• ‪SVG‬‬ ‫דוגמא...‬‫8‪j.mp/w3cmo‬‬ ‫611 / 61‬

‫דוגמא – חיפוש ‪title‬‬ ‫611 / 71‬

nagish.org.il 18 / 116

Techniques for WCAG 2.0 (single file)j.mp/w3il64 19 19 / 116

‫0.2 ‪WCAG‬‬‫21 הקווים המנחים‬‫02‬ ‫611 / 02‬

‫21 הקווים המנחים‬ ‫3. נהירּות‬ ‫1. תפיסה‬ ‫1.3 קריאּות‬ ‫1.1 חלופה טקסטואלית‬‫2.3 תפקוד באופן צפוי‬ ‫2.1 מדיה מבוססת־זמן‬ ‫3.1 גמישות‬‫3.3 עזרה בהזנת קלט‬ ‫4.1 הבחנה‬ ‫4. יציבות‬ ‫2. תפעול‬ ‫1.4 תאימּות‬ ‫1.2 נגישות מהמקלדת‬ ‫2.2 משך־זמן מספיק‬ ‫3.2 מניעת התקפים אפילפטיים‬ ‫4.2 ניווט נוח‬ ‫611 / 12‬

‫עקרון 1: נתפס‬ )perceive( ‫ניתן לתפוס מבחינה חושית‬ .‫את תוכן האתר‬it cant be invisible to all of their senses 22 / 116

‫1.1 חלופה טקסטואלית‬ ‫(תיאור תמונה, פקדים בטפסים, חלופה ל-‪) CAPTCHA‬‬‫05‪j.mp/w3il‬‬ ‫611 / 32‬

alt-‫נגיש: שימוש ב‬<img src="newsletter.gif" alt="Free newsletter. Get free recipes, news, and more. Learn more." /> )vs title (j.mp/w3il51 24 / 116

‫לא נגיש: טקסט ‪ alt‬חסר משמעות‬ ‫52‬ ‫611 / 52‬

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 26 / 116

‫נגיש: טקסט חלופי‬ ‫611 / 72‬

‫ראיה‬ ‫שמיעה‬www.google.com/recaptcha 28 28 / 116

‫קישוט, עיצוב, תוכן בלתי־נראה –‬ ‫באופן שטכנולוגיה מסייעת יכולה להתעלם ממנו‬‫92‬ ‫611 / 92‬

‫2.1 חלופות עבור מדיה מבוססת-זמן‬ ‫(כתוביות לוידאו, או קול, תיאורים כתובים של צלילים‬ ‫משמעותיים, תיאורי אודיו למידע חזותי משמעותי)‬ ‫611 / 03‬

Universal Subtitles :‫נגיש‬universalsubtitles.org 31 / 116

‫לא נגיש: אין תמלול לפודקסט‬‫‪bit.ly/f65m7O‬‬ ‫611 / 23‬

‫נגיש: יעוץ משפטי מבוסס וידאו -‬ ‫בשפת הסימנים.‬‫-‪radlegalservices.org.uk/bsl‬‬ ‫611 / 33‬

‫3.1 תוכן הניתן להתאמה‬‫(תגיות נכונות וסמנטיות, הפרדת תוכן מעיצוב, קרבה בין‬ ‫אלמנטים קשורים, זיהוי כותרות ורשימות)‬ ‫611 / 43‬

‫נגיש: הפרידו תוכן מעיצוב‬ ‫אותו אתר,‬ ‫ללא ‪CSS‬‬ ‫• ‪ HTML‬לתוכן‬ ‫דוגמא...‬ ‫• ‪ CSS‬לעיצוב‬ ‫• עיצוב ללא טבלאות‬‫321‪j.mp/dkrg‬‬ ‫611 / 53‬

‫נגיש: דוגמא – שינוי עיצוב‬standards.co.il csszengarden.com 36 / 116

‫נגיש: אלמנטים סמנטיים‬ ‫כותרות - >6‪<h1> – <h‬‬ ‫•‬‫רשימות ותפריטים - >‪ <ul‬ו >‪<ui‬‬ ‫•‬ ‫פסקה - >‪<p‬‬ ‫•‬ ‫הדגשה - >‪<strong‬‬ ‫•‬ ‫611 / 73‬

‫לא נגיש: שימוש לא נכון בכותרות‬‫‪lifehacker.com‬‬ ‫611 / 83‬

‫נגיש: שימוש נכון בכותרות‬weboverhauls.com/dennislembree/ 39 / 116

‫לא נגיש: אין כותרות‬‫‪Gov.il‬‬ ‫611 / 04‬

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 well 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> 41 / 116

‫קישורים ברורים ודילוג לתוכן‬a span.hide {height: 1px;width: 1px;position: absolute;overflow: hidden;top: -10px;} 42 / 116

-‫תגיות חדשות לשיפור סמנטיקה ב‬ HTML5<header><section><footer><nav><article><aside>… 43 / 116

‫הדרכה בהבנת תוכן ובהפעלתו לא תסתמך רק על‬‫המאפיינים החושיים של מרכיבים, כגון צורה, גודל,‬ ‫מיקום חזותי, כיוון או צליל.‬‫44‬ ‫611 / 44‬

‫לא נגיש: תגיות – העברת משמעות רק בעיצוב‬ ‫בלי‬ ‫‪CSS‬‬ ‫611 / 54‬

‫המנעו מ:‬ ‫"הקטגוריות שבצד ימין ...."‬ ‫"לחצו על הכפתור העגול....‬‫64‬ ‫611 / 64‬

‫נגיש: מידע המועבר בצבע בלבד – נמצא גם‬ ‫בטקסט ומוסתר בעזרת ‪CSS‬‬‫‪caniuse.com/datalist‬‬ ‫611 / 74‬

‫לא נגיש: אי אפשר לדעת מה מסומן בלי ‪CSS‬‬‫‪initializr.com‬‬ ‫611 / 84‬

‫4.1 בר הבחנה‬‫(הפרדת חזית מרקע – אי שימוש בצבע בלבד למשמעות, גודל‬ ‫אותיות בר הגדלה, אי שימוש בתמונה כטקסט, ניגודיות)‬ ‫611 / 94‬

‫שימוש בצבע‬‫הדגישו גם באמצעות עיבוי, הוספת מסגרת, 1שינוי רקע‬‫8‪j.mp/w3ad‬‬ ‫611 / 05‬

‫לא נגיש: שימוש בצבע בלבד להבעת משמעות‬‫‪kavhutz.wordpress.com‬‬ ‫611 / 15‬

‫ניגוד-צבעים‬ ‫יחס-ניגוד של לפחות 1:5.4‬ ‫כי קשה לקרוא כאשר אין מספיק‬ ‫ניגודיות‬‫)השתמשו בבודק ניגודיות: 9‪(j.mp/cont123 ,j.mp/w3ad‬‬ ‫611 / 25‬

‫לא נגיש: ניגודיות נמוכה בכותרת‬‫‪bit.ly/h26CQh‬‬ ‫611 / 35‬

‫נגיש: כפתור לשינוי הניגודיות באתר‬‫‪nptech.org.il‬‬ ‫611 / 45‬

‫נגיש: כפתורים לשינוי הניגודיות וגודל‬ ‫הטקסט‬‫‪j.mp/accessbb‬‬ ‫611 / 55‬

‫נגיש: אפשרות להגדלת הטקסט‬‫‪guardian.co.uk‬‬ ‫611 / 65‬

Or Just fluied :‫נגיש‬ 57 / 116

‫שליטה בשמע: אם יש מוסיקה אוטומטי (ליותר מ-3‬ ‫שניות) – ניתן להפסיק /להחליש‬‫דוגמא:‬ ‫611 / 85‬

‫לא מצאתי‬ ‫611 / 95‬

‫עקרון 2: ניתן להפעלה‬ .‫המרכיבים והניווט ניתנים להפעלה‬the interface cannot requireinteraction that a user cannot perform 60 / 116

‫1.2 תפקוד מלא ממקלדת‬ ‫(הגעה לכל הניווט, אין מלכודות מקלדת)‬ ‫611 / 16‬

‫לא נגיש: במעבר מקלדת – אי אפשר‬ ‫לראות איפה הפוקוס‬‫‪businessinsider.com‬‬ ‫611 / 26‬

‫נגיש: פוקוס נראה לעין‬accessibletwitter.com 63 / 116

event handlers-‫השתמשו ב‬ ‫מקבילים‬j.mp/w3il54 64 / 116

‫לא נגיש: אין תמיכה מלאה במקלדת‬ ‫בתפריט עליון‬‫‪whitehouse.gov‬‬ ‫611 / 56‬

‫לא נגיש: הסתמכות על ‪ :hover‬בלבד‬ ‫+ ניגודיות נמוכה‬‫‪helppassiton.co.uk‬‬ ‫611 / 66‬

‫נגיש: גישה לניווט באמצעות המקלדת‬‫‪nagish.org.il‬‬ ‫611 / 76‬

‫נגיש: ספקו חלופה לגרירה‬ ‫מצב נגישות בוורדפרס‬‫55‪j.mp/w3il‬‬ ‫611 / 86‬

moseover ‫לא נגיש: פועל רק עם‬j.mp/isl12 69 / 116

‫לא נגיש: מלכודת מקלדת‬‫‪j.mp/werjtfs‬‬ ‫611 / 07‬

‫נגיש: מקשי קיצור בפייסבוק‬ ‫611 / 17‬

‫2.2 מספיק זמן‬ ‫(הזהרה מפני סיום ‪ ,session‬אפשרות הארכה, עצירת תנועה‬‫ואיתחולה, עצירת עדכונים, אי הקצבת זמן לפעולה (אם אפשר) )‬ ‫611 / 27‬

‫נגיש: שליטה בעדכון אוטומטי‬‫‪downrightnow.com‬‬ ‫611 / 37‬

‫שמירת מידע בטופס בכדי אם נדרש אימות המשתמש‬ ‫(‪ )authentication‬לפני הגשתו‬ ‫611 / 47‬

‫הארכת ה-‪ session‬בשירותים מקוונים של‬ ‫הבנק‬ ‫611 / 57‬

‫3.2 מניעת התקפים‬‫(עצירת תזוזה, מנעת הבהובים וחלקים זזים)‬ ‫611 / 67‬

‫- לא יותר מ-3 הבהובים בשניה (או שאינו עובר את הסף)‬ ‫- איזורים מהבהבים - קטנים‬ ‫611 / 77‬

‫נגיש: סמל מהבהב – מעט ולא בולט‬‫‪gov.il‬‬ ‫611 / 87‬

‫לא נגיש: הרבה תנועה, צבעוני, גדול‬it.themarker.com/tmit/article/13885 79 / 116

‫נגיש: כפתור עצירת תנועה‬‫‪www.leumi.co.il‬‬ ‫611 / 08‬

‫נגיש: כפתור עצירת תנועה‬‫‪nagish.org.il‬‬ ‫611 / 18‬

‫4.2 קלות ניווט ומציאת מידע‬ ‫(מספר דרכים לאותו תוכן, דפים מובנים עם כותרות נכונות,‬‫קישורים ברורים, עקיפת בלוקים החוזרים על עצמם, סדר פוקוס‬ ‫נכון)‬ ‫611 / 28‬

‫נגיש: קישור ישיר לתוכן (גלוי או‬ ‫מוסתר)‬‫‪nagish.org.il‬‬ ‫611 / 38‬

‫נגיש: השתמשו בפירורי לחם‬‫‪education.gov.il‬‬ ‫611 / 48‬

‫נגיש:‬ ‫מפת אתר‬ ‫(מבוסס על סיפור אמיתי)‬‫‪coi.gov.uk‬‬ ‫611 / 58‬

‫טקסט בעל משמעות בקישורים‬‫‪ X‬לקריאת התוכנית המלאה לחץ כאן‬ ‫קראו את התוכנית המלאה‬ ‫‪V‬‬ ‫611 / 68‬

‫נגיש: כותרות ברורות....‬ ‫‪vs‬‬‫‪j.mp/ackdi‬‬ ‫611 / 78‬

‫עקרון 3: ניתן להבנה‬ ‫הטקסט ניתן לקראה ולהבנה‬the content or operation cannot bebeyond their understanding 88 / 116

‫1.3 טקסט בר הבנה‬‫(רמת הטקסט, זיהוי השפה בדף כולו ובחלקיו, פירוש קיצורים‬ ‫וזרגון)‬ ‫611 / 98‬

‫נגיש: זיהוי שפת הטקסט‬<html lang="fr"><html xml:lang="he”> 90 / 116

‫(למעט טקסט משפטי)‬ ‫611 / 19‬

‫נגיש: הרחבת קיצורים‬<p>Tasini <abbr title="andothers">et al.</abbr> <abbrtitle="versus">v.</abbr> The NewYork Times 92 / 116

‫2.3 תפעול ותצוגה צפויים‬‫(אי שינוי ההקשר בפוקוס או בלי שהמשתמש ביקש, ניווט עקבי)‬ ‫611 / 39‬

‫נגיש: לא לשנות את העמוד באופן משמעותי‬ ‫בגלל פוקוס על אלמנט‬‫‪w3c.org‬‬ ‫611 / 49‬

‫לא נגיש: איבוד פוקוס בניווט מקלדת‬‫‪ustream.tv‬‬ ‫611 / 59‬

‫3.3 תמיכה בהזנה‬‫הסבר מדויק לטעיות, הסבר על מה צריך להזין, ולידציה, טקסט‬ ‫עזרה)‬ ‫(בנייה חכמה של טפסים)‬ ‫611 / 69‬

‫דרכי מניעת טעויות בטפסים‬‫• הפיכּות - ניתן לבטל הפעולה‬ ‫• אישור - תצוגה מקדימה‬ ‫• בדיקה – בדיקת הערכים שהוזנו‬ ‫611 / 79‬

‫נגיש: טופס בנוי היטב‬ ‫שגיאות מוצגות כקישורים בראש הטופס‬ ‫•‬ ‫מוסבר מה הטעות באופן מדויק‬ ‫•‬ ‫<”‪>label for=“x‬‬ ‫•‬ ‫אין ‪...CAPTCH‬‬ ‫•‬ ‫(חסר: ולידציה לאימייל!!)‬ ‫•‬‫‪webaim.org/contact‬‬ ‫611 / 89‬

:‫נגיש‬www.data.gov.uk/user/regist 99 / 116

‫נגיש: זיהוי שגיאות והצגתן בראש הטופס‬‫/‪farukat.es/contact‬‬ ‫611 / 001‬

‫נגיש: עזרה בעת זיהוי טעות בטופס‬ ‫הצעת תיקון אפשרי‬‫‪los.direct.gov.uk‬‬ ‫611 / 101‬

‫עזרה‬ ‫- קישור לטקסט עזרה‬‫- הצגת דוגמאות לערכים נכונים‬ ‫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.w3.org - HTML‬‬ ‫• בודק תקינות ‪j.mp/w3add1 - 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 informationabout user interfaces to assistive technologies. Java accessiblity - j.mp/w3il59 Flash accessibility - j.mp/w3il60j.mp/aceess 108 / 116

Using the title attribute of the frameand iframe elements 109 / 116

WAI-ARIA… 110 / 116

‫ בעזרת‬checkbox ‫לא נגיש: יצירת‬ ‫ ו-תמונה‬span )WAI-ARIA ‫(ניתן להנגיש בעזרת‬<p> <span onclick="toggleCheckbox(chkbox)"><img src="unchecked.gif" id="chkbox" alt="">Include Signature </span> </p>j.mp/sdgtwq 111 / 116

‫לסיכום‬‫211‬ ‫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

http://www.w3c.org.il	190
http://eyalsela.blogspot.com	50
http://www.livecity.co.il	13
http://w3c.org.il	1
https://www.w3c.org.il	1
http://www.directrss.co.il	1
http://207.46.192.232	1

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

by Israeli Internet Association technology committee on Feb 20, 2011

Accessibility

Upload Details

Usage Rights

7 Embeds 257

Statistics

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