צ'ק ליסט להנגשת אתר
 Share
The version of the browser you are using is no longer supported. Please upgrade to a supported browser.Dismiss

View only
 
ABCDEFG
1
הנחיהמס קריטריוןקריטריון בדיקהתאור הקריטריון ע"פ איגוד האינטרנטהערות ותרגום של עידו סלערמה נדרשת בישראלתוצאה
(תקין / לא תקין / לא רלוונטי)
2
הנחיה 1.1 חלופה טקסטואלית: יש לספק חלופות טקסטואליות עבור תכנים שאינם טקסטואליים, כך שניתן יהיה להמירן לצורות אחרות להן זקוקים אנשים, כמו אותיות גדולות, ברייל, דיבור, סמלים או שפה פשוטה יותר.1.1.1תכנים שאינם טקסטואלייםא. לתמונות יש טקסט אלטרנטיבי באמצעות המאפיין alt, המתאר את מהות התמונה (כולל תמונות של כפתורים בטפסים ותמונות של hot spots ב image map.)
ב. לתמונות המהוות קישור יש טקסט החלופי מגדיר את מטרת הקישור תמונות
ג. לתמונות שאינן מעבירות מידע, כלומר משמשות לדקורציה בלבד, או תמונות שאינן מהוות קישור הכוללת מידע שקיים כבר בטקסט, יש טקסט חלופי ריק ""=alt או שהן מיושמות כרקע ב CSS
ד. חלופות שווה ערך לתמונות מורכבות מסופקות בהקשר או בדף הנפרד (צמוד ו / או הפניה באמצעות longdesc).
לא רלוונטי למקדמים, כל תמונה יש לה ALT בכל מקרהA
3
הנחיה 1.1 חלופה טקסטואלית1.1.1תכנים שאינם טקסטואלייםמולטימדיה משובצת - embedded - מזוהה באמצעות טקסט חלופיגם זה קורה באופן טבעי בד"כ שקוד אמבדד (לדוגמה קובץ דוקס) יש לו טקסט, אם לא, צריך להוסיף לוA
4
הנחיה 1.1 חלופה טקסטואלית1.1.1תכנים שאינם טקסטואלייםלמדיה מבוססת זמן (וידאו, אודיו, אנימציה), למבחן (שחלופה מלאה תפגע באפקטיביות שלו) ולתוכן שאינו טקסטואלי המהווה חוויה חושית - יש חלופה טקסטואלית, שלכל הפחות, מזהה אותו ומתארת את תוכנו.זה קורה כמעט אוטומטית, כל קובץ YouTube או אודיו יש לו טקסט אשר מסביר את תוכנו. באנימציה זה פחות קורה ואז צריך להוסיף טקסט הסברA
5
הנחיה 1.1 חלופה טקסטואלית1.1.1תכנים שאינם טקסטואלייםקיימת CHAPTCHA נגישה או חלופה ל CHAPTCHA - אם מטרתו של תוכן שאינו טקסט לוודא שהניגש לתוכן הוא אדם ולא מחשב, יש לספק חלופה טקסטואלית שתזהה את התוכן ותתאר את תכליתו, בנוסף לצורות חלופיות של CAPTCHA המכוונות לתפיסה בחושים אחרים, ומתאימות למוגבלויות שונות.להשתמש ב Chaptcha זה הכי מטופש בעולם ובכל מקרה אם משתמשים להוסיף לו אודיו. כל פלאגין תומך גזה בכל מקרהA
6
הנחיה 1.2 מדיה מבוססת-זמן: יש להמציא חלופות עבור מדיה מבוססת-זמן.1.2.1אודיו-בלבד ווידאו-בלבד (הקלטה מראש)לאודיו בלבד (מוקלט מראש למשל web cast) - יש תסריט המכיל את כל המידע האודיטורי הרלוונטי להבנת התוכן (הנ"ל יסופק במועד מוקדם ככל האפשר).לשים לב. מדובר על אודיו ללא שום תוספות כמו מצגת לדוגמה, אודיו פשוט כמו פודקאסט שניתן רק לשמוע, במקרה הזה צריך להוסיף הסבר טקסטואלי על האודיו אשר מסביר על התוכן, לא כתוביות אבל כן הסברAA
7
הנחיה 1.2 מדיה מבוססת-זמן1.2.1אודיו-בלבד ווידאו-בלבד (הקלטה מראש)לוידיאו בלבד (מוקלט מראש) - יש תסריט טקסטואלי או ערוץ אודיו המתאר את הערוץ הוויזואלי. (הנ"ל יסופק במועד מוקדם ככל האפשר).לשים לב שרק עסקים עם מחזור של 5 מליון ומעלה צריכים לתמוך בזה. לשים לב שמדובר רק על וידאו לבד וצריך לו הסבר על התוכן, לא כתוביות אבל הסבר כללי. AA
8
הנחיה 1.2 מדיה מבוססת-זמן1.2.2כתוביותבוידאו הכולל סאונד (קבצי וידאו, סרטוני YouTube וכדומה) יופיעו כתוביות מסונכרנות וחלופה טקסטואלית. (הנ"ל יסופק במועד מוקדם ככל האפשר).לשים לב שרק עסקים עם מחזור של 5 מליון ומעלה צריכים לתמוך בזה. "מדיה מסונכרנת" הכוונה שתי מדיות ומעלה עובדות ביחד, נניח סאונד וגם וידאו במקרה הזה צריך כתוביות. AA
9
הנחיה 1.2 מדיה מבוססת-זמן1.2.3תיאורי אודיו או חלופה טקסטואלית למדיה (מוקלטת מראש)תיאורי אודיו - טקסט (תסריט הכולל תיאורי אודיו) או תיאורי אודיו מלווים את הסרט הוידיאו ומתארים את כל ההתרחשויות הויזואליות שלא ניתן להם תיאור באודיו בסרט עצמו. (לדוגמא להוסיף את המילים "הקהל צוחק" לכתוביות). (הנ"ל יסופק במועד מוקדם ככל האפשר).אם כבר עושים כתוביות, אז לא בעיה להוסיף את זה AA
10
הנחיה 1.2 מדיה מבוססת-זמן1.2.5תיאורי אודיו למדיה (מוקלטת מראש)תיאורי אודיו מלווים את הסרט הוידיאו ומתארים את כל ההתרחשויות הויזואליות שלא ניתן להם תיאור באודיו בסרט עצמו. (הנ"ל יסופק במועד מוקדם ככל האפשר).כנ"ל, רואים את זה הרבה בסרטים "משב רוח" "נקישות בדלת" ועוד ועודAA
11
הנחיה 1.3 ניתן להתאמה: יש לבנות תכנים הניתנים להצגה בדרכים שונות (למשל מתווה פשוט יותר) ללא איבוד מידע או מבנה.1.3.1מידע וקשרים - מידע, מבנה, והקשרים הסמנטיים בין חלקי העמוד המועברים באמצעים ויזואליים (כגון גודל פונט, מסגרות, רקעים וכד') ניתנים להבנה גם באמצעות הקוד:כתיבת קוד סמנטי:
א. כותרות: שימוש <h1> to <h6> לזהות כותרות
ב. רשימות: שימוש <ul>, <ol>, and <dl>לרשימות או קבוצות של קישורים (כולל תפריטים)
ג. טקסטים מיוחדים: שימוש בסימון סמנטי כדי לסמן טקסט מודגש או מיוחד (לדוגמא <strong>, <code>, <abbr>, <block quote>)
ד. טבלאות: שימוש בסימון טבלה להצגת מידע טבלאי (TH לתאי כותרת או scope attribute), וכן שימוש ב caption elements כדי לשייך כותרת טבלת נתונים עם טבלת נתונים, וב Summary element בהתאם לצורך.
ה. טפסים: שימוש label elements לשייך תוויות טקסט עם פקדי טופס. מתן תיאור עבור קבוצות של פקדי טופס באמצעות קבוצת שדות וlegend elements.
ו. אזורים בעמוד: אזורים בעמוד (תפריט ניווט, איזור ראשי וכד') מוגדרים באמצעות landmarks (רצוי)
אין משימה, כל אתר וורדפרס פשוט או מערכות מודרניות תומכות בזהA
12
הנחיה 1.3 ניתן להתאמה1.3.1מידע וקשריםקיימת הפרדה מלאה בין תוכן לתצוגה על ידי שימוש ב CSSאין משימה, כל אתר וורדפרס פשוט או מערכות מודרניות תומכות בזהA
13
הנחיה 1.3 ניתן להתאמה1.3.2רצף בעל משמעותכאשר הסדר שבו מוצג תוכן משפיע על המשמעות של התוכן, הרצף יקבע בקוד (שימו לב לסדר המידע בקוד יש השפעה על האופן בו הוא מוקרא לעיוורים העושים שימוש בקוראה מסך לכן חובה לבצע את הבדיקה באמצעות קורא מסך ולוודא שסדר ההקראה לוגי)לא הייתי נכנס לזה, פשוט לבנות תוכן עם סדר נכון והגיוני כמו בכל אתרA
14
הנחיה 1.3 ניתן להתאמה1.3.3מאפייני חישההוראות אינן מסתמכות על צבע, צורה, או מיקום על המסך (לדוגמא, "לחץ על הכפתור המרובע כדי להמשיך", או "קרא את הוראות בצבע כחול")
הוראות אינן מסתמכות על סאונד (לדוגמא, המתן להישמע צפצוף כדי לעבוד לשלב הבא).
הגיוני ומוסבר טוב ונדיר שזה קורה בכלל, אולי מעט במערכותA
15
הנחיה 1.4 בר-הבחנה1.4.1שימוש בצבעא. צבע אינו אמצעי יחידי - צבע אינו משמש כאמצעי החזותי היחיד להעברת מידע, סימון פעולה, בקשת תגובה, או הבחנה בפרט חזותי.
ב. צבע אינו המבחין היחידי לסימון קישורים. אלא אם כן הבדלי הצבע בין הקישור לטקסט רגיל הוא 1:3 ועיצוב קישור משתנה במרכיב נוסף מלבד צבע on mouse over ו on focus (לדוגמא underline) .
הגיוני ומוסבר טוב ונדיר שזה קורה בכללA
16
הנחיה 1.4 בר-הבחנה1.4.2שליטה באודיושליטה באודיו - קיים מנגנון עצירה או הפסקה, או לשליטה בעוצמה של אודיו המנגן אוטומטית בדף במשך למעלה מ 3 שניות.כל מערכת מודרנית תומכת בזהA
17
הנחיה 1.4 בר-הבחנה1.4.3קונטרסטקונטרסט - עבור כל הטקסטים בעמוד - יחס-קונטרסט של לפחות 4.5:1 בטקסט רגיל. בטקסט גדול (over 18 point or 14 point bold) יחס של לפחות 3:1
(למעט: לוגו, טקסטים המשמשים כרקע לתמונה, טקסטים שלא נראים לאף אחד)
אם לא ניתן לעמוד בהנחיה זו מותר על פי התקנות לעשות שימוש בסט צבעים נוסף לאתר העומד בהנחיה.
כל פלאגין פשוט תומך בזהAA
18
הנחיה 1.4 בר-הבחנה1.4.4הגדלת טקסטהגדלת טקסט - כאשר מגדילים את הטקסט ב 200% (פי 2) אין פגיעה במידע ובפונקציונאליות של העמוד.כל אתר רספונסיבי תומך בזה, מה שכן זה מצריך בדיקהAA
19
הנחיה 1.4 בר-הבחנה1.4.5תמונות של טקסטאם טכנולוגית ניתן להשיג את אותה תצוגה ויזואלית באמצעות טקסט חי (למשל טקסט חי על תמונת רקע) אין להשתמש בטקסט של תמונה. פרט ל: אם קיימת טכניקה בה התמונה של טקסט יכולה להיות מותאמת אישית מבחינה ויזואלית לדרישות של המשתמש; או שהתמונה היא חיונית: הצגה מסוימת של טקסט בתמונה היא חיונית למידע (הערה - לוגו או brand נחשבים לחיוניים).לא רלוונטי, תמיד זה חיוני ואין כאן משימהAA
20
הנחיה 2.1 מקלדת נגישה: יש לאפשר תפקוד מלא ממקלדת.2.1.1מקלדתא. כל הפעולות באתר ניתנות לביצוע באמצעות מקלדת לחיצה על מקש tab)
ב. מעבר הפוקוס לוגי - מעבר לוגי אינטואיטיבי ומותאם למבנה המסך בין קישורים, פקדים וכדומה.
ג. רכיבים שאינם HTML מאפשרים שימוש מלא במקלדת המותאם להתנהגות רכיבי html.
ד. כאשר רכיב בדף מקבל פוקוס הדבר לא מעורר שינוי משמעותי בדף (פתיחת דף נוסף, הופעת popup, העברת הפוקוס לרכיב אחר וכדומה)
לשים לב שכאן אותי צריך התאמות קטנות, העניין בכלל הוא שליטה מלאה דרך מקלדת ב TAB או Shift Tab, בבדיקה פשוטה בודקים ותוך דקות מטפלים. A
21
הנחיה 2.1 מקלדת נגישה2.1.2מלכודות מקלדתהדף אינו כולל "מלכודות מקלדת" (אלמנטים שניתן להגיע אליהם באמצעות המקלדת אך לא ניתן לנווט מהם הלאה)אם עשיתם את הסעיף הקודם כמו שצריך, הסעיף הזה לא אמור להתקייםA
22
הנחיה 2.2 זמן מספיק: יש לתת למשתמשים מספיק זמן לקרוא ולהשתמש בתכנים.2.2.1כוונון זמןבכל מצב בו יש הגבלת זמן לקריאה, תגובה או פעולה (כולל time out), למשתמש ניתנת אפשרות לבטל, להאריך, או להתאים לעצמו את הגבלת הזמן.
(למעט מקרים בהם הגבלת הזמן היא מעל 20 שעות).
נדיר, כמעט לא קורה ואם זה מתקיים אז צריך לשלול את הרשיון של בונה האתריםA
23
הנחיה 2.2 זמן מספיק2.2.2הפסקה, עצירה, הסתרהא. ניתן להפסיק, לעצור או להסתיר מידע מהבהב, נע או נגלל (שמופיע במשך יותר מ 5 שניות)
ב.יש לקבוע מנגנון שיאפשר למשתמש לעצור, להפסיק או להסתיר מידע המתעדכן באופן אוטומטי, או שיאפשר שליטה בתדירות העדכון, אם המידע (1) מופיע באופן אוטומטי, (2) מוצג במקביל לתוכן אחר; למעט מקרים שבהם העדכון האוטומטי מהותי לפעולה.
נדיר, מי שם הבהובים היום? שייך ל 1995 ולא רלוונטי בכלל ברוב האתרים, אם שמתם הבהוב אז לטפלA
24
הנחיה 2.3 התקפים: אין לעצב תכנים באופן הידוע כגורם להתקפים.2.3.1הבהוב וריצודאין הבהוב או ריצוד על במסך בקצב של יותר משלוש פעמים בשנייה או general flash and red flash thresholds.כמו הסעיף הקודםA
25
הנחיה 2.4 ניתן לניווט: יש לספק דרכים כדי לעזור למשתמשים לנווט, לאתר תכנים, ולקבוע את מקום הימצא.2.4.1עקיפת בלוקיםקיים מנגנון לעקיפת בלוקים (יחידות קבועות שחוזרות על עצמן במספר עמודים כגון תפריטים, באנרים וכד'). המנגנון תומך בניווט ישיר לתוכן העמוד.למערכות הוורדפרס בד"כ יש חץ כזה קטן אשר מאפשר "לקפוץ למעלה" לראש העמוד. אני מציע פה טיפ אשר גם טוב ברמת ה UI וגם פותר את זה בקלות. לשים תפריט צף למעלה, הן במחשב והן בנייד ואז היוזר בכל מקום ובכל זמן יכול להגיע לאן שהוא רוצה בקלותA
26
הנחיה 2.4 ניתן לניווט2.4.2כותרת דףלכל העמודים יש כותרת - page title - ייחודית המתארת את תוכן / פונקציונאליות של העמודכל מקדם עושה את זה דיפולטיביתA
27
הנחיה 2.4 ניתן לניווט2.4.3Focus orderבניווט באמצעות מקלדת (מקש TAB) מעבר הפוקוס לוגי, אינטואיטיבי ומותאם למבנה העמודכל פלאגין תומך בזה. התרגום הוא צריך פוקוס על הלינקA
28
הנחיה 2.4 ניתן לניווט2.4.4מטרת הקישור (מתוך הקשר)מטרת הקישור ברורה מתוך טקסט הקישור או מתוך הקונטקסט (המשפט או הפסקה בו הוא נמצא). בכל מקרה שעלול להיווצר חוסר בהירות מסופק title לקישור שמסביר במדוייק ובאופן מלא מהי מטרת הקישור.כל אתר בנוי כך, אין פה באמת משימה, אין היום תפריט שרשום בו "לחץ כאן", בכל מקרה השורה התחתונה שכל קישור צריך הקשרA
29
הנחיה 2.4 ניתן לניווט2.4.5ריבוי דרכים לאיתור דף באתריש יותר מדרך אחת להגיע לעמוד (אלא אם הוא שלב בתהליך או תוצאה של תהליך): דרכים אפשריות - מפת אתר, מנגנון חיפוש, תוכן עניינים, תפריט המכיל את כל העמודים באתר, bookmarks במסמכי PDF.אני חושב ש"מפת אתר" הוא די אולד סקול, אבל אפשר להוסיף, הכי פשוט הוא להוסיף תפריט פשוט וכן מנוע חיפוש, יש הרי לכל אחד גם Sitemap לטובת גוגל זה די סוגר את הפינהAA
30
הנחיה 2.4 ניתן לניווט2.4.6כותרות ותוויותכותרות ותוויות ברורות המבהירות בברור את הנושא או המטרה.ברור, לעבוד בכל מקרה באתר עם H1, H2 וכו', זה טוב לקידום אתרים בכל מקרה ונכון AA
31
הנחיה 2.4 ניתן לניווט2.4.7פוקוס נראה לעיןאפקט ויזואלי בפוקוס - כל מרכיב המקבל פוקוס בשימוש במקלדת מקבל אפקט ויזואלי (ע"י הדפדפן או ע"י שינוי עיצוב של הרכיב)נתמך בפלאגין, כך שלינקין יקבלו צבע ואפקט אחרAA
32
הנחיה 2.4 ניתן לניווט2.4.10כותרות לקטעיםיש שימוש בכותרות כדי לזהות קטעים (sections)נתמך בכל מערכת, אין כאן משימהAA
33
הנחיה 3.1 קריא: יש ליצור תכני טקסט קריאים וניתנים להבנה.3.1.1השפה בדףשפת כתיבה - בעמוד מוגדרת שפת הכתיבה (עברית, ערבית, אנגלית) ב HTML TAG. לדוגמא "Lang="heנמתך בכל מערכת, אין כאן משימהA
34
הנחיה 3.1 קריא: יש ליצור תכני טקסט קריאים וניתנים להבנה.3.1.2השפה בחלקים בעמודבכל מקום בתוכן בו יש שינוי של שפת הכתיבה מצוין השינוי בקוד באמצעות Lang attributeקיים בכל מערכת, אין כאן משימהA
35
הנחיה 3.2 ניתן לניבוי: יש לגרום לדפי רשת להופיע ולתפקד באופן הניתן לניבוי3.2.1on focusכאשר רכיב מקבל פוקוס לא מתרחש שינוי משמעותי (דוגמאות לשינוי משמעותי - פתיחת חלון חדש, העברת מוקד לרכיב אחר, מעבר לדף חדש (כולל כל דבר שנראה למשתמש כאילו בוצע מעבר לדף חדש) או ארגון מחדש של התכנים בדף).נתמך בכל פלאגיןA
36
הנחיה 3.2 ניתן לניבוי: יש לגרום לדפי רשת להופיע ולתפקד באופן הניתן לניבוי3.2.2on inputכאשר המשתמש משנה ערך של ממשק משמש לא מתרחש שינוי משמעותי באופן אוטומטי אלא אם כן המשתמש יודע על כך מראש (דוגמאות לשינוי משמעותי - פתיחת חלון חדש, העברת מוקד לרכיב אחר, מעבר לדף חדש (כולל כל דבר שנראה למשתמש כאילו בוצע מעבר לדף חדש) או ארגון מחדש של התכנים בדף).נדיר שזה קורה, בד"כ יהיה כפתור "הבא" או משהו כזה, לא מתקיים אם משנים ערךA
37
הנחיה 3.2 ניתן לניבוי3.2.3ניווט עקבימנגנוני ניווט באתר מופיעים באותו סדר בכל פעם בה הם חוזרים על עצמם ויש להם אותו זיהוי.במילים אחרות, לשים בר עליון קבוע - מתקיים בכל אתר כמעטAA
38
הנחיה 3.2 ניתן לניבוי3.2.4זיהוי עקביזיהוי רכיבים באופן זהה - כל רכיבי ממשק המשתמש המופיעים במספר רב של עמודים מזוהים באופן זההבמילים אחרות, שפת עיצוב אחידה לאתר, מתקיים בכל אתר כמעטAA
39
הנחיה 3.3 עזרה בקלט: יש לסייע למשתמשים להמנע משגיאות ולתקנן.3.3.1
3.3.3
זיהוי שגיאההודעות שגיאה - בטופס אם ניתן לזהות שגיאות של המשתמש באופן אוטומטי מופיעה הודעת שגיאה טקסטואלית
אם ידועות הצעות לתיקון, אזי ההצעות ניתנות למשתמש, אלא אם כן זה עלול לחבל באבטחה או במטרה של התכנים
הודעת השגיאה מזוהה גם על ידי קוראי מסך
כל מחולל טפסים לדוגמה "גרביטי" מקיים את זה, שאם לא מילאת שדה מסויים הוא מקים לך שגיאה. A
40
הנחיה 3.3 עזרה בקלט3.3.2תויות והוראותכאשר המשתמש נדרש להזים מידע מסופקות לו תוויות והוראותכל טופס מקיים את זה ומקסימום להוסיף "Place Holder" כדי לעשות זאת, הרי מה, לא תרצו לציין ללקוח שיזין כאן את הנייד שלו וכו'? אין כאן באמת משימהA
41
הנחיה 3.3 עזרה בקלט3.3.4מניעת שגיאות (משפטי, פיננסי נתונים)בטפסים הגוררים התחיבויות משפטיות או פעולות פיננסיות, שינוי או מחיקה של נתוני משתמש מבסיס נתונים, או תשובות משתמש במבחן, לפחות אחד הבאים מתקיים:
1. הפיכות: ביצוע הפעולה הוא הפיך.
2. בדיקה: נתונים שהוזנו על ידי המשתמש נבדקים לאיתור שגיאות קלט ולמשתמש ניתנת הזדמנות לתקן אותן.
3. אישור: קיים מנגנון לבחינה חוזרת, אישור, ותיקון מידע לפני ביצוע submit סופי.
כל טופס פשוט מקיים את זה, כל טופס פשוט ניתן לעריכה, כל טופס פשוט רואים מה הזנת וכל טופס יש לך "שלח לפני ההזנה" אני כמעט לא מכיר משהו אחרAA
42
הנחיה 4.1 תואם: יש לדאוג לתאימות מרבית עם סוכני משתמש קיימים ועתידיים, כולל טכנולוגיות מסייעות.4.1.1סטנדרטיזציהבשימוש ב markup languages:
א. לכל אלמנט יש tag התחלה וסיום לפי הסטנדרטים
ב. אין attributes כפולים
ג. כל ה IDs ייחודים
ד. יש nesting נכון על פי הסטנדרטים
קיים בכל פלטפורמה, אין כאן שום משימהA
43
הנחיה 4.1 תואם4.1.2שם תפקיד וערךא. שם תפקיד וערך - עבור כל רכיבי ממשק המשתמש (כולל אך לא מוגבל ל: אלמנטים בטופס, קישורים ורכיבים שנוצרו על ידי תסריטים), השם והתפקיד של הרכיב מזוהים בקוד; מצבים מאפיינים וערכים שהמשתמש יכול להגדיר ניתנים מוגדרים בקוד; והודעה על שינויים בפריטים אלה זמינה לסוכני משתמש, כולל טכנולוגיות מסייעות (כגון קוראי מסך)
ב. כמו כן, לכל frame ו iframe יש title המתאר את מטרתו
קיים בכל פלטפורמה, אין כאן שום משימהA
Loading...