הנחיות נגישות למפתחי אינטרנט – רמה AA

הערות מקדימות:

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

הנחיות כלליות

  • תחביר תקין וסמנטי של קוד העמוד (HTML), פתיחה וסגירה של תגיות.
  • שימוש בכותרות H באופן מדורג והיררכי בכל דף מתחילתו ועד סופו.
  • ישנה העדפה משמעותית לפקדים סטנדרטיים על פני פקדים מדומים. לדוגמה: שימוש בפקד select ולא לייצר פקד דמוי לינק.
  • עיצוב יבוצע אך ורק באמצעות CSS
    • מאפיין style=”” בתוך תגית, תגיות style ב- head, שימוש בקובץ חיצוני עם .
    • לא מומלץ להשתמש במאפייני HTML כדוגמת color=”” או border=””.
  • טבלאות נתונים: יש להשתמש ב-, caption.

יש להימנע משימוש בטבלאות מורכבות הכוללות rowspan, colspan או טבלאות בתוך טבלאות.

  • ככלל, לא מומלץ להשתמש בטבלאות מסוג layout tables אם אינן לשם הצגת נתוני מידע.
  • בעת שימוש בטבלאות ובבלוקים של CSS (Div, Span) יש להקפיד כי רצף הקריאה היחסי ישמר גם בעת ביטול CSS ושיטוח הטבלאות (linearized) בעמוד.
  • תפריטים חייבים להיות עם טקסט חי אשר מאפשרים זיהוי על ידי תוכנה.
  • האתר צריך לתמוך בהגדלתו מבלי שטקסט ייחתך, ייעלם, יעלה זה על זה.
    • מומלץ לאפשר מבנה גמיש שלא יגרום להופעת פס גלילה רוחבי.
  • שימוש בתגיות lang להגדרת שפת עיקר התוכן בעמוד וכאשר ישנה פסקת טקסט בשפה אחרת.
  • כל אלמנט מורכב כדוגמת iframe צריך להכיל מאפיין title.
  • ניווט באתר – יש להשתמש באחד מהבאים:
    • מפת אתר (מציג היררכיה של מחלקות האתר אם ישנן)
    • מנוע חיפוש
    • פירורי לחם (breadcrumbs)
  • כל תמונה, ללא יוצא מן הכלל מכילה מאפיין Alt המתאר את תוכנה. יש לציין כי תמונות עיצוביות, שאין להן ערך מוסף יכילו Alt ריק (מחרוזת ריקה).
  • אלמנטיים המכילים תנועה אוטומטית (תמונה מתחלפת, טקסט רץ) יאפשרו לגולש להפסיקה.
  • יש להימנע מרענון אוטומטי או שינוי התוכן בדף כתגובה לפעולה של המשתמש מבלי שניתנה לו על כך התראה מראש.
  • יש להימנע מחלונות קופצים במהלך ניווט בתוך האתר. כל שימוש בפופ-אפ צריך להיות מלווה בהתראה מתאימה מראש.
  • יש לאפשר שליטה מלאה על האתר באמצעות המקלדת
    • מוקד המקלדת (פוקוס) יזוהה באופן חזותי על המסך – כל הכפתורים, לינקים ופקדים אחרים.
    • מומלץ להשוות את התנהגות הפקדים בקבלת פוקוס (עם טאב) ל- mouse hover.
    • אין להתערב בסדר הניווט הלוגי ע"י Tabindex (שערכו גדול מ- 0). יש להשתמש רק במקרי קצה.
    • אין לדרוש קצב הקלדה מסויים.
  • מומלץ לתייג מונחים מקצועיים או קיצורים שאינם נפוצים עם תגית abbr.
  • יש לעבוד על פי כללי wai-aria עבור רכיבים שאינם סטנדרטיים וכן ברכיבים המשתנים בתוך הדף (רכיבים צפים, תוכן מתעדכן מעצמו וכדומה).

קישורים

  • אלמנט חייב להכיל מאפיין href בכדי שיהיה מזוהה לקורא מסך כאלמנט לחיץ.
  • אין להוסיף מידע חשוב על הקישור בתוך מאפיין title – לא כל קוראי המסך מתייחסים. מידע חשוב רצוי להציג לכולם.
  • קישורי המשך כגון "לחץ כאן" יש לשלב בתוךאו
  • אויחד עם הטקסט הרלוונטי להם.

טפסים

  • יש להשתמש בתגיות label עם המאפיין for=”id” עבור כל שדות הקלט.
  • בשדות קלט שאין אפשרות להוסיף להם טקסט בתגית label יש להשתמש במאפיין aria-label.
  • שימוש ב- placeholder לא מחליף label או aria-label.
  • שימוש ב- alert dialogהבסיסי של הדפדפן להודעות שגיאה זה נגיש.
  • הקראת הודעת שגיאה (בתוך div) לקורא המסך תיעשה באמצעות מאפיין role=alert
  • אם יש מספר אלמנטים ב- DOM עם מאפיין role=alert רק הראשון מוקרא בתוכנת קורא המסך.
  • יש לציין את הודעות השגיאה במפורש – לא מספיק לכתוב "יש להזין דואר אלקטרוני" כאשר השגיאה היא שהדוא"ל שהוזן אינו תקין. לכן יש לכתוב במפורש שהקלט בשדה דוא"ל אינו תקין.
  • אם כל השגיאות מופיעות בבלוק אחד מרוכז (נניח בראש הטופס) יש להוסיף בסמוך קישור עם פוקוס לשדה.

תפריטים

  • יש לבנות תפריטים באמצעות אלמנט הרשימה ul & li ללא טבלאות.
  • מומלץ שהפוקוס הנראה לעין בתפריטים יהיה זהה לאפקט המתרחש במעבר עכבר.

מעקף בלוקים

גישה ישירה בניווט מקלדת לתוכן העמוד, נוויגציה משנית, פוטר מפת אתר וכדומה

  • ממומש עם אלמנט הרשימה ul & li ומוסתר מעיני הגולש בטכניקות שונות, ראה סעיף הסתרת טקסט.
  • הלינקים נחשפים לגולש בזמן קבלת פוקוס באמצעות CSS – a:focus
  • דפדפן כרום בד"כ לא מעביר את הפוקוס בהצלחה, ניתן לפתור עם jQuery.
  • לשיפור הנגישות ניתן להוסיף מנגנון נוסף בעזרת תגי aria landmarks על אלמנט ה- div של כל איזור.
    מחייב את הגולש להתקין תוסף או תוכנה בכדי לעבוד עם זה.