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

נגישות לאינטרנט הלכה למעשה - הנחיות וטכניקות © כל הזכויות שמורות לעמותת נגישות ישראל 8002 גילה גרטל | יועצת נגישות לאינטרנט

© כל הזכויות שמורות לעמותת נגישות ישראל 8002 הנחיות נגישות אתרים WCAG חשוב לדעת! Å גרסה 1 נוכחית משנת 9991 Å טיוטא סופית לגרסה 2 מדצמבר 7002 תהפוך לגרסה רשמית במהלך 8002. שתי הגרסאות דומות מבחינת המהות והדרישות שלוש רמות נגישות: – A רמה ראשונה )בסיסית( –בתקנות הישראליות תחייב אתרי גופים פרטיים – AA רמה שנייה –בתקנות הישראליות תחייב אתרי רשויות – AAA רמה שלישית ההבדלים בין הגרסאות: 1. גרסה 1 תלוית טכנולוגיה. גרסה 2 הנחיות ברמה העקרונית ללא תלות בטכנולוגיה. 2. קיימים שינויים בחלק מההנחיות וברמת הנגישות אליהן הן משויכות.

© כל הזכויות שמורות לעמותת נגישות ישראל 8002 מבנה גרסה 2 של הנחיות הנגישות ארבעה עקרונות ) (Principles נגישות עיקריים: 1. ניתן לתפיסה ) (Perceivable 2. בר הפעלה ) (Operable 3. מובן ) (Understandable 4. יציבות טכנולוגית ) (Robust תחת כל עקרון יש מספר הנחיות ) (Guide lines לכל הנחיה מוגדרים קריטריונים להצלחה ) (Success Criteria המסווגים לפי שלוש רמות הנגישות. לכל קריטריון יש דוגמאות וטכניקות ליישום. במצגת זו נציג את כל הנחיות הנגישות ברמה A ו AA וניתן דוגמאות לטכניקות ליישום חלק מההנחיות. 1. Principle 1. 1 Guide line 1. 1. 1 Success Criteria 1. 1. 2 Success Criteria 1. 2 Guide line 1. 2. 1 Success Criteria 1. 2. 2 Success Criteria 2. Principle 2. 1 Guide line 2. 1. 1 Success Criteria 2. 1. 2 Success Criteria 1. 2 Guide line 2. 2. 1 Success Criteria 2. 2. 2 Success Criteria

© כל הזכויות שמורות לעמותת נגישות ישראל 8002 1 עקרון התפיסה ) : (perceivable וודא שכל התכנים מוצגים באופן שהמשתמש יוכל לתפוס הנחיות: 1. 1 חלופה טקסטואלית לתוכן שאינו טקסטואלי. 2. 1 ספק חלופה טקסטואלית מסונכרנת למולטימדיה. 3. 1 אדפטציה - צור תוכן שאפשר להציגו במספר אופנים )תצוגה פשוטה, הקראה, הגדלה( 4. 1 מובחנות – אפשר למשתמש לראות ולשמוע מידע

© כל הזכויות שמורות לעמותת נגישות ישראל 8002 כללי נגישות – תפיסה 1. 1. ספק חלופות טקסטואליות לכל התכנים שאינם טקסט 1. טקסט חלופי מאפשר לאנשים שאינם רואים ולמנועי חיפוש לקבל מידע על תכנים ויזואליים. הטקסט החלופי ינתן לתמונות, באנרים, אנימציות וכיו"ב >"חפש"= <IMG src=“search. gif" alt חשוב: Å הטקסט החלופי יתאר את הפונקציונאליות ו/או המידע המועבר באמצעות האלמנט הויזואלי. Å תמונות המשמשות לקישוט או ריווח בלבד ”“= Alt

© כל הזכויות שמורות לעמותת נגישות ישראל 8002 כללי נגישות – תפיסה 2. 1. חלופות למולטימדיה מסונכרנות עם ההתרחשויות על המסך 1. 2. 3. 4. כתוביות לסרטים ואנימציות שהן לא live תיאורי אודיו או טקסט חלופי להתרחשויות משמעותיות או חלופת טקסט מלאה – למשל השמעת צפירה בסרט תלווה בטקסט "נשמעת צפירה". הדובר בסרט מתחלף תלווה בקריינות "נשיא המדינה שמעון פרס". כתוביות לסרטים אנימציות ב (AA) live תיאורי אודיו ) (AA

© כל הזכויות שמורות לעמותת נגישות ישראל 8002 כללי נגישות – תפיסה 3. 1. צור תוכן שאפשר להציגו במספר אופנים מידע ויחסים המועברים למשתמש באמצעות עיצוב - צור הפרדה בין תוכן/מידע ומבנה לבין תצוגה. ההפרדה תישמר גם אם המשתמש או האמצעי ישנה את פורמט התצוגה. 1. מידע מבנה והיחסים - ספק מידע באמצעותו המשתמש יכול להבין )באמצעים טכנולוגים( מהו מידע מבנה והיחסים בין חלקי המידע. 2. סדר הקריאה נכון של העמוד המבטא את הקשר בין היחידות בעמודת. לדוגמא: כותרות לטבלאות Å שימו לב בעברית יש להקפיד על הגדרה של כיוון הכתיבה dir, rlm, lrm לעולם לא לכתוב בעברית ויזואלית!!!! 3. מאפיינים חושיים - הוראות הפעלה והבנה אינן מסתמכות על יכולות חושיות – גודל, צבע, מיקום, סאונד.

© כל הזכויות שמורות לעמותת נגישות ישראל 8002 כללי נגישות – תפיסה 3. 1. צור תוכן שאפשר להציגו במספר אופנים Å כותרות – 6 h 1 -h המבטאות בצורה אמינה את היררכית המידע. רצוי להגדיר ב CSS את ה Style שלהם Å רשימות – ניתן להגדיר ב- CSS תמונה כ- bullet כחלק מהגדרת עיצוב הרשימה. Å כותרות ל frame ול iframe Å טפסים )פירוט בהמשך( Å טבלאות נתונים )פירוט בהמשך( wn do ll 1 ri h D } ; letter-spacing: 1 em ; font-family: Times, serif ; %004: font-size ; font-weight: bold { ul { List-style: square inside )' url('arrow. gif }

© כל הזכויות שמורות לעמותת נגישות ישראל 8002 כללי נגישות – תפיסה 3. 1. צור תוכן שאפשר להציגו במספר אופנים טבלאות נתונים פשוטות wn do ll Å השתמש ב TH לכותרות Å שימוש ב caption element כדי לקשר בין כותרת הטבלה לטבלה Å שימוש ב summary element לתיאור תוכן הטבלה Å קיצור כותרות – attribute abbr > <th abbr="Employees">Number of Employees</th ri D

© כל הזכויות שמורות לעמותת נגישות ישראל 2008 wn do ll ri D כללי נגישות – תפיסה 3. 1. צור תוכן שאפשר להציגו במספר אופנים טבלאות נתונים מורכבות כדי לקשר בין תאים בטבלה לכותרות scope attribute שימוש ב <table summary="The number of employees and the foundation year of some imaginary companies. "> <caption>Table 1: Company data</caption> <tr> <td></td> <th scope="col">Employees</th> <th scope="col">Founded</th> </tr> <th scope="row">ACME Inc</th> <td>1000</td> <td>1947</td> </tr> <th scope="row">XYZ Corp</th> <td>2000</td> <td>1973</td> </tr> </table> Table 1: Company data Employees Founded ACME Inc 1000 1947 XYZ Corp 2000 1973

© כל הזכויות שמורות לעמותת נגישות ישראל 2008 wn do ll כללי נגישות – תפיסה 3. 1. צור תוכן שאפשר להציגו במספר אופנים <table class="extbl" summary="The number of employees ri טבלאות נתונים מורכבות and the D foundation year of some imaginary companies. "> <caption>Table 1: Company data</caption> <tr> <td rowspan="2"></td> <th id="employees" colspan="2">Employees</th> <th id="founded" rowspan="2">Founded</th> </tr> <th id="men">Men</th> <th id="women">Women</th> </tr> <th id="acme">ACME Inc</th> <td headers="acme employees men">700</td> <td headers="acme employees women"> 300</td> <td headers="acme founded">1947</td> </tr> <th id="xyz">XYZ Corp</th> <td headers="xyz employees men">1200</td> <td headers="xyz employees women">800</td> <td headers="xyz founded">1973</td> </tr> </table> Header ו ID דרך נוספת - שימוש ב כדי לקשר בין תאים בטבלה לכותרות Table 1: Company data Employees Founded Men Women ACME Inc 700 300 1947 XYZ Corp 1200 800 1973

© כל הזכויות שמורות לעמותת נגישות ישראל 8002 כללי נגישות – תפיסה 4. 1 מובחנות – אפשר למשתמש לראות ולשמוע מידע 1. שימוש בצבע - כאשר נעשה שימוש בצבע כדי להעביר מידע, השתמש באלמנט ויזואלי נוסף שיצור את ההבחנה )גודל פונט, בולד, איקון, מסגרת(. 2. שליטה על אודיו - אפשר לכבות או להשקיט סאונד המושמע באופן אוטומטי )יותר מ 3 שניות( 3. קונטרסט - הקפד על קונטרס של 1: 5 בין הרקע לטקסט. בתמונות הקונטרסט צריך להיות 1: 3. ) (AA 4. הגדלת טקסט - אפשר הגדלה של עד %002 של טקסטים ללא שימוש בעזרים מיוחדים ) (AA הערה: ניתן לספק למשתמש שליטה בצבעוניות וגודל בממשק האתר

© כל הזכויות שמורות לעמותת נגישות ישראל 8002 לדוגמא – מה תופס עיוור

© כל הזכויות שמורות לעמותת נגישות ישראל 8002 כללי נגישות 2 עקרון ההפעלה ) : (operable וודא שכל המשתמשים יכולים להפעיל את ממשק האתר. הנחיות: 1. 2 הבטח שכל הפעולות ניתנות לביצוע באמצעות מקלדת. 2. 2 תן למשתמשים מספיק זמן לקריאה, לאינטראקציה או לתגובה. 3. 2 אל תיצור תוכן שעלול לגרום להתקף אפילפטי. 4. 2 עזור למשתמשים לנווט, להתמצא ולמצוא מידע.

© כל הזכויות שמורות לעמותת נגישות ישראל 8002 כללי נגישות – הפעלה 1. 2 הבטח שכל הפעולות ניתנות לביצוע באמצעות מקלדת. כל הפעולות באתר צריכות מבוצעות באמצעות מקלדת )שימו לב לתפריטים – בהרבה אתרים הם לא נגישים דוגמא לתפריט נגיש( Å שינויים שמתרחשים כתוצאה מ onmouseover יבוצעו גם ב onfocus Å יש לשמור על Tab. Index תקין ולוגי )באמצעות . (Tab. Index

© כל הזכויות שמורות לעמותת נגישות ישראל 8002 כללי נגישות – הפעלה 1. 2 אין "מלכודות" מקלדת לא יהיה מצב בו המשתמש במקלדת נכנס לרכיב במסך ואינו יכול לצאת ממנו באמצעות המקלדת. לדוגמא – אם יש applet שמשתלט על ניהול ה focus ה applet ידאג להחזיר את ה focus לעמוד, או שיכלול הסבר ופונקציונאליות המחזירה את הפוקוס לעמוד.

© כל הזכויות שמורות לעמותת נגישות ישראל 8002 כללי נגישות – הפעלה 2. 2 תן למשתמשים מספיק זמן לקריאה, לאינטראקציה או לתגובה. 1. כוונון זמן - בכל מצב של הגבלת זמן, אפשר למשתמש לבצע אחת מהפעולות הבאות: )למעט מקרים שהגבלת הזמן הכרחית – מכירה פומבית, או משחק על זמן( Å לכבות את הגבלת הזמן. Å להתאים את הגבלת הזמן. Å להגדיל את הגבלת הזמן – ע"י הודעה לפני ה Timeout Å שימו לב redirect או auto refresh מפריעים לעבודת "קורא המסך" – יש לאפשר למשתמש לעצור אותם. 2. עצירה – ניתן לעצור תנועה, הבהוב, סקרולינג או עדכון אוטומטי של תוכן ) (AA

© כל הזכויות שמורות לעמותת נגישות ישראל 8002 כללי נגישות – הפעלה 3. 2 אל תיצור תוכן שעלול לגרום להתקף אפילפטי. Å תוכן אינו מרצד יותר מ 3 פעמים בשנייה או שהריצוד נמוך מ . general flash and red flash thresholds

© כל הזכויות שמורות לעמותת נגישות ישראל 8002 כללי נגישות – הפעלה 4. 2 עזור למשתמשים לנווט, להתמצא, לדעת היכן הם נמצאים ולמצוא מידע. 1. עקיפת בלוקים - ספק מנגנון לעקיפת בלוקים של תוכן שחוזרים על עצמם בהרבה עמודים )כגון תפריטים(. 2. כותרת לעמוד - Page Title ייחודי לעמוד המתאר את תוכן העמוד 3. Focus Order לוגי –באמצעות Tabindex 4. מטרת הקישור צריכה להיות ברורה וייחודית )הקישור לא יהיה "לחץ כאן" "לפרטים נוספים"( 5. קיימת יותר מדרך אחת לאתר מידע ) - (AA מפת אתר, מנוע חיפוש, תוכן עניינים וכד'. 6. כותרות ו labels תיאוריים ) (AA 7. נראות של ה (AA) Focus

© כל הזכויות שמורות לעמותת נגישות ישראל 8002 כללי נגישות 3 עקרון המובנות ) : (Understandable צור תכנים ואמצעי אינטראקציה מובנים לכמה שיותר משתמשים הנחיות: 1. 3 קריאות ומובנות של התכנים. 2. 3 סידור מסך עקבי והתנהגות של מרכיבים אינטראקטיבים ניתנת לחיזוי. 3. 3 עזור למשתמשים להימנע מטעויות ולתקן טעויות שביצעו.

© כל הזכויות שמורות לעמותת נגישות ישראל 8002 כללי נגישות – מובנות 1. 3 קריאות ומובנות של תכנים Å הגדרת שפה ברמת העמוד Å הגדרת שפה בכל חלקי העמוד ) (AA Å פירוש לקיצורים ראשי תיבות מינוחים מקצועיים ) (AAA

© כל הזכויות שמורות לעמותת נגישות ישראל 8002 כללי נגישות – מובנות 2. 3 סידור מסך עקבי והתנהגות צפוייה של מרכיבים אינטראקטיביים 1. 2. 3. 4. - On Focus לא גורם לשינוי של תכנים ולביצוע פעולה On Input הזנה של תוכן ע"י המשתמש אינה גורמת לשינוי תוכן או ביצוע פעולה, ללא ידוע המשתמש מראש. קונסיסטנטיות בניווט ) (AA קונסיסטנטיות בזיהוי מרכיבי מסך ) (AA

© כל הזכויות שמורות לעמותת נגישות ישראל 8002 כללי נגישות – מובנות 3. 3 עזור למשתמשים להימנע ולתקן טעויות 1. 2. 3. 4. זיהוי טעויות באופן אוטומטי – ותאור הפריט למשתמש. שימו לב הודעת השגיאה צריכה לכלול את שם השדה במדויק. רצוי לקשר את הודעת השגיאה לשדה. אספקה של כותרות ) (labels והוראות ברורות. עזרה בתיקון - אם זוהתה טעות וניתן להציע עזרה, יש להציע אותה ) (AA מניעת טעויות )בתהליך משפטי, כלכלי, או נתונים( יש לאפשר אחד מהבאים ) (AA Å הפעולה הפיכה Å בדיקת הנתונים לפני המעבר לשלב הבא Å הצגה של הנתונים, אפשרות לשינוי ואישור המשתמש

© כל הזכויות שמורות לעמותת נגישות ישראל 8002 כללי נגישות 4 עקרון היציבות

© כל הזכויות שמורות לעמותת נגישות ישראל 8002 כללי נגישות - יציבות טכנולוגית 1. 4 תאימות ל user agents עכשוויים ועתידיים )כולל טכנולוגיה מסייעת( 1. כתיבת קוד תקינה - TAG התחלה וסיום לכל אלמנט וקינון נכון של הקוד. 2. שם, תפקיד וערך לכל Control השתמש בפקדי טופס ולינקים של HTML לדוגמא: Å השתמש באלמנט label בכדי לקשר תוויות טקסט לפקדי טופס. Å השתמש ב- title attribute של אלמנט . frame 1. השתמש ב- title attribute בכדי לזהות פקדי טופס כאשר לא ניתן להשתמש באלמנט label

© כל הזכויות שמורות לעמותת נגישות ישראל 2008 כללי נגישות – תפיסה wn do עכשויים ועתידים )כולל טכנולוגיה user agents 1. 4 תאימות ל l ril מסייעת( טפסים D בטופס לטקסט שמתאר אותו control כדי לקשר בין label שימוש באלמנט • <label for="firstname">First name: </label> </ "input type="text" name="firstname" id="firstname"> controls בכדי לתאר קבוצה של fieldset & legend שימוש באלמנטים (radio buttons ו checkbox בטופס )רלוונטי ל <fieldset> <legend>I am interested in the following (check all that apply): </legend> <input type="checkbox" id="photo" name="interests" value="ph"> <label for="photo">Photography</label>< br /> <input type="checkbox" id=" watercol" name="interests" checked="checked" value=" wa"> <label for="watercol">Watercolor</label> <input type="checkbox" id="acrylic" name="interests" checked="checked" value="ac"> <label for="acrylic">Acrylic</label> … </fieldset> •

© כל הזכויות שמורות לעמותת נגישות ישראל 2008 כללי נגישות – תפיסה wn do עכשויים ועתידים )כולל טכנולוגיה user agents 1. 4 תאימות ל l ril מסייעת( טפסים D : . לדוגמא label כדי לזהות שדות כאשר אין אפשרות להשתמש ב Title שימוש ב . שדה של מספר טלפון המפוצל לקידומת ולמספר - : מספר טלפון <fieldset><legend>Phone number</legend> <input id=" area. Code " name=" area. Code " title="Area Code" type="text" size="3" value="" > <input id="exchange" name="exchange" title="First three digits of phone number" type="text" size="3" value="" > <input id=" last. Digits " name=" last. Digits " title="Last four digits of phone number" type="text" size="4" value="" > </fieldset>

© כל הזכויות שמורות לעמותת נגישות ישראל 8002 סיכום - כללי נגישות על רגל אחת 1. 2. 3. 4. 5. 6. 7. חלופות שליטה של המשתמש – זמן, תצוגה, אודיו מובחנות ויזואלית ושמיעתית הפרדה בין תוכן לתצוגה עקביות והתנהגות ניתנת לחיזוי מניעת טעויות וסיוע סטנדרטים

נגישות לאינטרנט הלכה למעשה — הנחיות וטכניקות