כלים ושיטות להנגשת אתרי אינטרנט על פי  WCAG 2.0
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 1,372 views

http://www.w3c.org.il

http://www.w3c.org.il

Statistics

Views

Total Views
1,372
Views on SlideShare
939
Embed Views
433

Actions

Likes
0
Downloads
0
Comments
0

10 Embeds 433

http://www.w3c.org.il 307
http://eyalsela.blogspot.com 55
http://eyalsela.blogspot.co.il 26
http://eyalsela.blogspot.ru 26
http://www.livecity.co.il 13
http://eyalsela.blogspot.gr 2
http://www.directrss.co.il 1
https://www.w3c.org.il 1
http://w3c.org.il 1
http://207.46.192.232 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • ‫1102/2/32‬ ‫כלים ושיטות להנגשת אתרי אינטרנט‬ ‫על פי 0.2 ‪WCAG‬‬ ‫אייל סלע‬ ‫מנהל פרויקטים, איגוד האינטרנט הישראלי‬ ‫ומשרד ה-‪ W3C‬הישראלי‬ ‫611 / 1‬
  • ‫תוכנית...‬ ‫מהי נגישות‬ ‫•‬ ‫כלים‬ ‫•‬‫21 הקווים המנחים - 0.2 ‪WCAG‬‬ ‫•‬ ‫סיכום‬ ‫•‬ ‫611 / 2‬
  • ‫איגוד האינטרנט הישראלי‬ ‫שלוחת האיגוד הבינלאומי‬ ‫עמותה ללא מטרת רווח‬‫פועל לקידום האינטרנט והטמעתו בישראל כתשתית‬ ‫טכנולוגית, מחקרית, חינוכית, חברתית ועסקית‬ ‫611 / 3‬ View slide
  • ‫‪W3C‬‬ ‫• ארגון בינלאומי‬ ‫• כ-053 ארגונים‬ ‫• פורום ניטראלי ליצירת תקני הווב‬ ‫• משימה:‬‫להוביל את הרשת למיצוי הפוטנציאל על ידי פיתוח‬‫פרוטוקולים וקווים מנחים שיאפשרו את צמיחתה‬ ‫לטווח ארוך.‬ ‫4‬ ‫611 / 4‬ View slide
  • ‫מהי‬‫נגישות‬ ‫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