המלצות לתשתית נגישה באתרי אינטרנט

מסמך זה כולל המלצות לתשתית נגישה באתרי אינטרנט (ולא לתכנים מתחלפים המוזנים ומשתנים ע"י עורכי תוכן) באופן שניתן יהיה לזיהוי ע"י תוכנה ובאופן שתואם את הנחיות Wcag 2.0. ניתן ליישם טכניקות אחרות ובלבד שהם עונים על הנחיות Wcag 2.0 , התקן הישראלי ת"י 5568 ותקנה 35.

כותרת Title לכל עמוד

  • לכל עמוד תינתן כותרת המתארת את תכליתו של העמוד
  • תחילה יש לספק את שם העמוד ולאחר מכן את שם האתר. לדוגמה צור קשר – האתר שלך.

איתור תוכן באתר

  • שדה חיפוש
  • מפת אתר

התג דלג לתוכן ראשי

  • בכל עמוד יש לוודא שמצוי מנגנון המאפשר עקיפת מנגנונים קבועים באתר.
  • ככל שהדבר אפשרי, מומלץ שהתג דלג לתוכן ראשי יגיע ישירות לכותרת הראשית באזור התוכן הראשי.
  • את הכותרת באזור התוכן הראשי יש להגדיר כ h1 או 2 ובאופן שיהיה עקבי בכל העמודים

טקסט חלופי לתמונות

יש לספק טקסט חלופי לכל תמונה או תמונת קישור המעבירה מידע חשוב ו/או המפנה לעמוד בו ניתן לצרוך תכנים ו/או לבצע פעולות.

תגי כותרת H

  • אם האתר מחולק לאזורים שונים – מומלץ לסמן אותם כתגי כותרת h שהמבנה שלהם מבחינה היררכית יהיה עקבי לאורך כל העמודים השייכים לאתר.

הגדרת תפקודים לרכיבים קבועים באתר באמצעות HTML5 ו ARIA

  • המנגנונים הקבועים באתר צריכים להיות מזוהים ע"י תוכנות קוראות מסך באמצעות תגי HTML5 ובאמצעות ARIA LandMarks  .
  • ב ARIA מומלץ להשתמש כשתגי HTML סטנדרטיים לא מספקים את המענה עבור תוכן דינאמי או תוכן שיש לו משמעות תפקודית.

דוגמאות לתגי ARIAמומלצים הם

  • ROLE=Banner : הוספת טקסט חלופי לפרסומות
  • ROLE=Main : תוכן מרכזי בדף (שניתן להגיע אליו באמצעות התג דלג לתוכן ראשי)
  • ROLE=Header : החלק העליון של הדף
  • ROLE=Footer : החלק התחתון של העמוד
  • ROLE=Article : אזור מאמר
  • ROLE=nav תפריט ניווט
  • ROLE=aside: תפריט צד
  • Sections: סעיפים או חלקים – בהתאם לסוג התוכן. אפשר להציג סעיפי משנה של מאמר או כדי להציג חלקים שונים בדף

הנגשת תפריטים הכוללים תפריטי משנה

נגישות לתפריטים באמצעות רכיבי ARIA

  • role=menu : יאפשר לקורא מסך לזהות שמדובר בציון דרך מסוג תפריט
  • aria-haspopup=tru : יאפשר לקורא מסך לזהות שתפריט מסוים כולל תת תפריט
  • class=trigger : יאפשר למשתמש מקלדת ללחוץ על מקש ה ENTER בכדי לפתוח את התפריט.ואת הקישורים המצויים בו – פעולה מקבילה למקש חץ שמאלי במקלדת.

עיצוב ניגודיות

  • טקסט ותמונות של טקסט יקיימו יחס ניגודיות של 1:4.5
  • כאשר קישור מקבל פוקוס מקלדת או עכבר, עליו להיות מובחן גם מבחינה חזותית ביחס לשאר  הקישורים באתר.
  • שימוש ב HTML5 ו ARIA אינו פוגע בעיצוב.

ניווט

  • על הניווט באתר באמצעות מקש ה Tab ובאמצעות מקשי החיצים להיות לוגי בהתאם לסדר הרכיבים המוצגים על גבי המסך. אם אין הכרח – אין לשנות את מנגנוני הניווט באתר.
  • ניתן יהיה לנווט בין כל הקישורים ופקדי הטפסים באמצעות מקש ה Tab וללא צורך בשימוש בעכבר.
  • הימנעות ממלכודות מקלדת הנוצרות על ידי סקריפטים חיצוניים ואלמנטים לא תקניים
  • כאשר רכיב מקבל פוקוס באמצעות מקלדת או עכבר – לא יתבצע שינוי משמעותי מבלי שהמשתמש בחר ב Enter או הקליק על העכבר. דוגמאות לשינויים משמעותיים הם מעבר לעמוד אחר, חשיפת תפריט משנה, פתיחת חלון קופץ וכד'.

טפסים מקוונים

  • יש לספק הוראות למילוי הטופס במיוחד כשמדובר בטפסים מורכבים
  • חובה Label לכל שדות הקלט
  • מומלץ Placeholder
  • הודעות שגיאה שיזוהו באופן ברור הן ע"י אנשים רואים והן ע"י קוראי מסכים. ניתן להשתמש ברכיבי ARIA בכדי לייצג שדות חובה והודעות שגיאה שיזוהו ע" קוראי מסכים.

יש לאפשר ניווט מקלדת בין שדות הקלט באמצעות מקש ה Tab בהתאם לסדר פקדי הטופס כפי שנראים לעין.

הצהרת נגישות: פרסום התאמות נגישות

יש להציב באתר קישור שיפנה לעמוד אודות נגישות. בעמוד זה יכללו  לכל הפחות המרכיבים הבאים:

  1. פרסום התאמות הנגישות שבוצעו בשירות הציבורי בממד הפיזי
  2. פרסום פרטי רכז הנגישות
  3. פרסום התאמות הנגישות שבוצעו באתר

 

 

עודכן ע"י אילנה בניש בתאריך 06.04.2016