הנחיות ברורות (יותר) לבדיקת נגישות
אחת ההנחיות להנגשת האתר לפי חוק נגישות האתרים היא לעבור על טופס בדיקות נגישות לאתר אינטרנט, שניתן למצוא באתר משרד המשפטים. הטקסט שבקובץ קשה לקריאה, גם בגלל פורמט האקסל וגם מפני שהוא מתורגם מאנגלית. לפניכם הגרסה המוגהת והקריאה יותר של הקובץ.
ישנם ארבעה קריטריונים לאתר נגיש לפי wcag 2.0:
ניתן לתפיסה
חלופה טקסטואלית
יש לספק חלופות טקסטואליות עבור תכנים שאינם טקסט, כך שניתן יהיה להמירן לדרכי תקשורת אחרות, כמו אותיות גדולות, ברייל, דיבור, סמלים או שפה פשוטה יותר.
תכנים שאינם טקסטואליים
- יש לספק טקסט חלופי לתמונות באמצעות המאפיין
alt
, המתאר את מהות התמונה (כולל תמונות של כפתורים בטפסים ותמונות של אזורים לחיצים ב-imagemap
) - לתמונות המהוות קישור יש לספק טקסט חלופי המגדיר את מטרת הקישור
- לתמונות שאינן מעבירות מידע, כלומר משמשות לקישוט בלבד, או לתמונות הכוללת מידע שקיים כבר בטקסט ואינן מהוות קישור, יש להגדיר טקסט חלופי ריק
""=alt
או ליישמן כרקע ב CSS - יש לספק חלופות שוות ערך לתמונות מורכבות בהקשר נפרד (בסמוך לתמונה) או בדף נפרד (עם הפניה מהמאפיין
longdesc
)
מולטימדיה מוטמעת - embedded - צריכה גם היא להיות מתוארת באמצעות טקסט חלופי.
למדיה מבוססת זמן (וידאו, אודיו, אנימציה), למבחן (שחלופה מלאה תפגע באפקטיביות שלו) ולתוכן שאינו טקסטואלי המהווה חוויה חושית - צריכה להיות חלופה טקסטואלית, שלכל הפחות, מזהה אותו ומתארת את תוכנו.
אם בטפסים שבאתר צריכה להיות קאפצ׳ה (CAPTCHA) עליה להיות נגישה או שתהיה לה חלופה. בנוסף לחלופות אלו, יש לספק טקסט שיזהה את הקאפצ׳ה ויתאר את תכליתה.
מדיה מבוססת-זמן
יש לספק חלופות עבור מדיה מבוססת-זמן.
אודיו-בלבד ווידאו-בלבד (הקלטה מראש)
לאודיו בלבד (מוקלט מראש למשל webcast) - יש לספק תסריט המכיל את כל המידע האודיטורי הרלוונטי להבנת התוכן (הנ"ל יסופק במועד מוקדם ככל האפשר).
לוידיאו בלבד (מוקלט מראש) - יש לצרף תסריט טקסטואלי או ערוץ אודיו המתאר את הערוץ הוויזואלי. (הנ"ל יסופק במועד מוקדם ככל האפשר).
כתוביות
בוידאו הכולל סאונד (קבצי וידאו, סרטוני YouTube וכדומה) יש לדאוג שיופיעו כתוביות מסונכרנות וחלופה טקסטואלית. (הנ"ל יסופק במועד מוקדם ככל האפשר).
תיאורי אודיו או חלופה טקסטואלית למדיה (מוקלטת מראש)
תיאורי אודיו - יש לספק טקסט (תסריט הכולל תיאורי אודיו) או תיאורי אודיו המלווים את סרט הוידיאו ומתארים את כל ההתרחשויות הויזואליות שלא ניתן להם תיאור באודיו בסרט עצמו. (לדוגמא להוסיף את המילים "הקהל צוחק" לכתוביות). (הנ"ל יסופק במועד מוקדם ככל האפשר).
תיאורי אודיו למדיה (מוקלטת מראש)
תיאורי אודיו מלווים את הסרט הוידיאו ומתארים את כל ההתרחשויות הויזואליות שלא ניתן להם תיאור באודיו בסרט עצמו. (הנ"ל יסופק במועד מוקדם ככל האפשר).
ניתן להתאמה
יש לבנות תכנים הניתנים להצגה בדרכים שונות (למשל בעיצוב פשוט יותר) ללא איבוד מידע או מבנה.
מידע ויחסים
המידע, המבנה, והמשמעות המועברים באמצעים ויזואליים (כגון גודל פונט, מסגרות, רקעים וכד') צריכים להיות ניתנים להבנה גם באמצעות הקוד.
כתיבת קוד סמנטי:
- כותרות - יש להשתמש בתגיות
<h1>
עד<h6>
לסימון כותרות - רשימות - יש להשתמש בתגיות
<ul>
,<ol>
, או<dl>
לרשימות או קבוצות של קישורים (כולל תפריטים) - טקסטים מיוחדים - יש להשתמש בקוד סמנטי כדי לסמן טקסט מודגש או מיוחד (לדוגמא
<strong>
,<code>
,<abbr>
,<blockquote>
) - טבלאות - יש להשתמש בטבלה להצגת מידע טבלאי (
th
ומאפייןscope
לתאים בראש הטבלה), באלמנטcaption
כדי לשייך כותרת לטבלה, וכן באלמנטsummary
בהתאם לצורך. - טפסים - יש להשתמש באלמנט
label
לשייך תוויות טקסט לשדות טופס. יש לתת תיאור לקבוצות של שדות הטופס באמצעותfieldset
עם כותרת מסוגlegend
. - אזורים בעמוד - רצוי שאזורים בעמוד (תפריט ניווט, איזור ראשי וכד') יהיו מוגדרים באמצעות aria landmarks
יש לקיים הפרדה מלאה בין תוכן לעיצוב על ידי שימוש ב-CSS.
רצף בעל משמעות
אם הסדר שבו התוכן מוצג משנה את המשמעות של התוכן, יש לשמור על סדר זה גם בקוד (לסדר המידע בקוד יש השפעה על האופן בו הוא מוקרא לעיוורים העושים שימוש בקורא מסך ולכן חובה לבצע את הבדיקה באמצעות קורא מסך ולוודא שסדר ההקראה לוגי).
מאפיינים חושיים
יש לוודא שהוראות שבאתר אינן מסתמכות על צבע, צורה, או מיקום על המסך (לדוגמא, "לחץ על הכפתור המרובע כדי להמשיך", או "קרא את ההוראות בצבע כחול").
יש לוודא שההוראות שבאתר אינן מסתמכות על סאונד (לדוגמא, "המתן להישמע צפצוף כדי לעבוד לשלב הבא").
בר-הבחנה
שימוש בצבע
יש לוודא ש:
- צבע אינו האמצעי היחידי - צבע אינו משמש כאמצעי החזותי היחיד להעברת מידע, לסימון פעולה, לבקשת תגובה, או להבחנה בפרט חזותי.
- צבע אינו המבחין היחידי לסימון קישורים. אלא אם כן הבדלי הצבע בין הקישור לטקסט רגיל הוא 1:3 ועיצוב הקישור משתנה במרכיב נוסף מלבד צבע בעת מעבר עכבר מעל הקישור (לדוגמא קו תחתי) ובעת העברת הפוקוס לקישור.
שליטה באודיו
יש לוודא שקיים מנגנון עצירה או הפסקה, או מנגנון לשליטה בעוצמה של אודיו המתנגן אוטומטית בדף במשך למעלה מ 3 שניות.
קונטרסט
קונטרסט - יש לוודא שבכל הטקסטים בעמוד קיים יחס-קונטרסט של לפחות 4.5:1 בטקסט רגיל. בטקסט גדול (מעל 18 פיקסלים או 14 פיקסלים מודגש) יש לשמור על יחס של לפחות 3:1 (למעט: לוגו, טקסטים המשמשים כרקע לתמונה, טקסטים שלא נראים לאף אחד).
אם לא ניתן לעמוד בהנחיה הנ״ל, מותר לעשות שימוש בסט צבעים נוסף שיעמוד בהנחיה זו.
הגדלת טקסט
הגדלת טקסט - כאשר מגדילים את הטקסט ב 200% (פי 2) יש לוודא שהמידע נותר קריא ושיכולת השימוש בדף לא נפגעת.
תמונות של טקסט
אין להשתמש בטקסט שנשמר כתמונה אם טכנולוגית ניתן להשיג את אותה התוצאה הויזואלית באמצעות טקסט חי (למשל טקסט חי על תמונת רקע), פרט למקרים הבאים:
- אם קיימת טכניקה שבה תמונת הטקסט יכולה להיות מותאמת אישית לדרישות של המשתמש מבחינה ויזואלית
- התמונה היא חיונית: הצגה מסוימת של טקסט בתמונה היא חיונית למידע (לוגו או מותג נחשבים לחיוניים)
בר תפעול
מקלדת נגישה
יש לאפשר תפקוד מלא באתר על ידי מקלדת.
מקלדת
יש לוודא ש:
- כל הפעולות באתר יכולות להתבצע באמצעות מקלדת (לחיצה על מקש tab)
- מעבר הפוקוס הגיוני - מעבר אינטואיטיבי ומותאם למבנה המסך בין קישורים, שדות טופס וכדו׳
- רכיבים שאינם HTML מאפשרים שימוש מלא במקלדת המחקה את התנהגות רכיבי ה-html המקבילים
- כאשר רכיב בדף מקבל פוקוס הדבר לא מעורר שינוי משמעותי בדף (פתיחת דף נוסף, הופעת פופאפ, העברת הפוקוס לרכיב אחר וכדו׳)
מלכודות מקלדת
הדף אינו כולל "מלכודות מקלדת" (אלמנטים שניתן להגיע אליהם באמצעות המקלדת אך לא ניתן לנווט מהם הלאה).
זמן מספיק
יש לתת למשתמשים מספיק זמן לקרוא ולהשתמש בתכנים.
כוונון זמן
בכל מצב בו יש הגבלת זמן לקריאה, לתגובה או לפעולה (כולל timeout), יש לתת למשתמש אפשרות לבטל, להאריך, או להתאים לעצמו את הגבלת הזמן. (למעט מקרים בהם הגבלת הזמן היא מעל 20 שעות).
הפסקה, עצירה, הסתרה
- יש לוודא שניתן להפסיק, לעצור או להסתיר מידע מהבהב, נע או נגלל (שמופיע במשך יותר מ 5 שניות)
- יש לקבוע מנגנון שיאפשר למשתמש לעצור, להפסיק או להסתיר מידע המתעדכן באופן אוטומטי, או שיאפשר שליטה בתדירות העדכון, אם המידע (1) מופיע באופן אוטומטי או (2) מוצג במקביל לתוכן אחר; למעט מקרים שבהם העדכון האוטומטי מהותי לפעולה
התקפים
אין לעצב תכנים באופן הידוע כגורם להתקפים.
הבהוב וריצוד
יש לוודא כי אין הבהוב או ריצוד על המסך בתדירות של יותר משלוש פעמים בשנייה או שההבהוב הוא מתחת לסף הכללי או לסף של אור אדום.
ניתן לניווט
יש לספק דרכים שיעזרו למשתמשים לנווט, לאתר תכנים, ולקבוע את מקום הימצאם.
עקיפת בלוקים
יש לוודא שקיים מנגנון לעקיפת בלוקים (יחידות קבועות שחוזרות על עצמן במספר עמודים כגון תפריטים, באנרים וכד'). המנגנון צריך לתמוך בניווט ישיר לתוכן העמוד.
כותרת דף
יש לוודא שלכל העמודים יש כותרת (אלמנט title
) ייחודית המתארת את התוכן / הפונקציונאליות של הדף.
סדר פוקוס
יש לוודא שבניווט באמצעות מקלדת (מקש TAB) מעבר הפוקוס הגיוני, אינטואיטיבי ומותאם למבנה העמוד.
מטרת הקישור (מתוך הקשר)
מטרת הקישורים צריכה להיות ברורה מתוך טקסט הקישור או מתוך ההקשר (המשפט או הפסקה בו הוא נמצא). בכל מקרה שעלול להיווצר חוסר בהירות יש לספק title
לקישור שמסביר במדוייק ובאופן מלא מהי מטרת הקישור.
ריבוי דרכים לאיתור דף באתר
יש לוודא כי קיימת יותר מדרך אחת להגיע לעמוד (אלא אם הוא שלב בתהליך או תוצאה של תהליך) דרך: מפת אתר, מנגנון חיפוש, תוכן עניינים, תפריט המכיל את כל העמודים באתר, סימניות במסמכי PDF.
כותרות ותוויות
יש לספק כותרות ותוויות ברורות המבהירות בברור את הנושא או המטרה.
פוקוס נראה לעין
הוספת אפקט ויזואלי בפוקוס - יש לוודא שכל מרכיב המקבל פוקוס בשימוש במקלדת מקבל אפקט ויזואלי (ע"י הדפדפן או ע"י שינוי עיצוב של הרכיב).
כותרות לקטעים
יש לעשות שימוש בכותרות כדי לסמן אזורים בדף (רמה AAA בלבד - ל.פ.).
מובן
קריא
יש ליצור תכני טקסט קריאים וניתנים להבנה.
השפה בדף
שפת כתיבה - יש לוודא שבעמוד מוגדרת שפת הכתיבה (עברית, ערבית, אנגלית) בתגית ה-html
. לדוגמא, לאתר בעברית: "lang="he
.
השפה בחלקים בעמוד
בכל מקום בתוכן בו יש שינוי של שפת הכתיבה יש לציין את השינוי בקוד באמצעות מאפיין lang
.
צפוי
דפי האתר צריכים להיראות ולתפקד באופן צפוי.
בעת פוקוס (on focus)
כאשר רכיב מקבל פוקוס יש לוודא כי לא מתרחש שינוי משמעותי (דוגמאות לשינוי משמעותי: פתיחת חלון חדש, העברת מוקד לרכיב אחר, מעבר לדף חדש - או כל דבר שנראה למשתמש כאילו בוצע מעבר לדף חדש, או ארגון מחדש של התכנים בדף).
הקלדת תוכן (on input)
כאשר המשתמש משנה ערך של שדה, יש לוודא כי לא מתרחש שינוי משמעותי באופן אוטומטי אלא אם כן המשתמש יודע על כך מראש (דוגמאות לשינוי משמעותי - פתיחת חלון חדש, העברת מוקד לרכיב אחר, מעבר לדף חדש - כולל כל דבר שנראה למשתמש כאילו בוצע מעבר לדף חדש, או ארגון מחדש של התכנים בדף).
ניווט עקבי
מנגנוני הניווט באתר צריכים להופיע באותו הסדר בכל פעם בה הם חוזרים על עצמם ועליהם לשמור על אותו המראה.
זיהוי עקבי
הופעת רכיבים באופן זהה - כל רכיבי ממשק המשתמש המופיעים במספר רב של עמודים צריכים להיראות באופן זהה.
עזרה בקלט
יש לסייע למשתמשים להמנע משגיאות ולתקנן.
זיהוי שגיאה
הודעות שגיאה - אם ניתן לזהות את הטעויות של המשתמש בעת מילוי הטופס באופן אוטומטי יש להציג הודעת שגיאה טקסטואלית.
אם ידועות הצעות לתיקון, אזי ההצעות צריכות להינתן למשתמש, אלא אם כן הדבר עלול לחבל באבטחה או במטרה של התכנים.
הודעת השגיאה צריכה להיות מזוהה גם על ידי קוראי מסך.
תויות והוראות
כאשר המשתמש נדרש להזין מידע יש לוודא שמסופקות לו תוויות והוראות.
מניעת שגיאות (משפטי, פיננסי נתונים)
בטפסים הגוררים התחייבויות משפטיות או פעולות פיננסיות, שינוי או מחיקה של נתוני משתמש מבסיס נתונים, או תשובות במבחן, לפחות אחד הבאים מתקיים:
- הפיכות: ביצוע הפעולה הוא הפיך
- בדיקה: נתונים שהוזנו על ידי המשתמש נבדקים לאיתור שגיאות קלט ולמשתמש ניתנת הזדמנות לתקן אותן
- אישור: קיים מנגנון לבחינה חוזרת, אישור, ותיקון מידע לפני ביצוע השליחה הסופית
איתן
תואם
יש לדאוג לתאימות מרבית עם user agents קיימים ועתידיים, כולל טכנולוגיות מסייעות.
סטנדרטיזציה
בשימוש בשפות markup יש לוודא כי:
- לכל אלמנט יש תגיות התחלה וסיום לפי הסטנדרטים
- אין מאפיינים כפולים
- כל ה-
id
ייחודיים - יש קינון תגיות נכון על פי הסטנדרטים
שם תפקיד וערך
- שם תפקיד וערך - יש לוודא שעבור כל רכיבי ממשק המשתמש (למשל: אלמנטים בטופס, קישורים ורכיבים שנוצרו על ידי סקריפטים):
- השם והתפקיד של הרכיב מזוהים בקוד
- מצבים, מאפיינים וערכים שהמשתמש יכול לשנות מוגדרים בקוד
- הודעה על שינויים בפריטים אלה זמינה ל-user agents, כולל טכנולוגיות מסייעות (כגון קוראי מסך)
- כמו כן, לכל
frame
וiframe
יש להוסיףtitle
המתאר את מטרתו