הנחיות נגישות לעיצוב, UX ותוכן באינטרנט – רמה AA

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

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

הנחיות כלליות לעיצוב / UX

  • הפרדה ברורה בין חלקי הממשק (תפריטים, כפתורים) לאיזור התוכן.
  • יש להקפיד על סדר הופעת התוכן בדף, כאשר יש לכך השפעה על משמעותו ועל פי מידת חשיבותם של הדברים.
  • גופן מומלץ לכתיבה ממשפחת Sans-serif כגון Arial, Tahoma, Helvetica.
  • למידע מורחב על בחירת גופנים נגישים באינטרנט: http://webaim.org/techniques/fonts
  • יש לשמור על ניגודיות בין צבע הטקסט לרקע (גם בכפתורים ותפריטים) של 1:4.5 לפחות.
    • אין הדבר כולל לוגו או אלמנטים שחשיבותם עיצובית בלבד.
    • עבור טקסטים בעלי קנה מידה גדול תידרש ניגודיות של 1:3.
  • קישורים צריכים להיות מזוהים מהמבנה או מהעיצוב גם למי שאינו רואה צבע:
    • צבע הקישור שונה משמעותית מצבע הטקסט הרגיל הסובב אותו (יחס של 3:1 מהטקסט ו- 5:1 מצבע הרקע) וגם מופיע קו תחתון מתחת לקישור כאשר מצביעים עליו עם העכבר או מקבל פוקוס.
    • באופן קבוע מופיע קו תחתון מתחת לקישור או אלמנט מוסכם אחר שאינו מבוסס צבע.
      • מומלץ להוסיף שינוי צבע (להקפיד על 5:1 מצבע הרקע) בהצבעת עכבר או קבלת פוקוס.
    • מומלץ שלא להשתמש בתוכן בקו תחתון עבור ביטויים שאינם לינקים.
    • אין לעצב תכנים באופן המניח כי המשתמש רואה צבע ומבחין בין צבעים להבנת משמעויות שונות.
    • יש להימנע ככל הניתן משימוש בתמונות של טקסט במקום טקסט חי. אין הדבר כולל לוגו או אלמנטים שחשיבותם עיצובית בלבד.
    • יש להימנע מעיצובים העשויים לגרום להתקפים אפילפטיים:
      • לא יותר משלושה הבזקים בשנייה אחת (באנר, סרטון, כפתורים, טיקר חדשות וכיו"ב).
    • רצוי מאוד להימנע מעיצוב עם טבלאות מורכבות (תאים לא אחידים, מיזוג שורות וכדומה).
    • בטפסים מורכבים יש להציג את שמות השדות בסמוך לשדה הקלט ולא בתוך השדה.

כדאי לדעת – רכיבים מיוחדים בעלי עיצוב מתקדם-אינטראקטיבי

*כולל אבל לא מוגבל ל- שכבה צפה, תוכן מתעדכן מעצמו, פס גלילה מעוצב, קומבו מעוצב, ממשק טאבים.

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

*כולל אבל לא מוגבל ל- שכבה צפה, תוכן מתעדכן מעצמו, פס גלילה מעוצב, קומבו מעוצב, ממשק טאבים.

הנחיות כלליות לעורך תוכן

  • יש להקפיד על סדר הופעת התוכן בדף, כאשר יש לכך השפעה על משמעותו ועל פי מידת חשיבותם של הדברים.
  • כאשר התוכן הטקסטואלי הינו בעל מבנה מדורג (פתיח, נושאי משנה, סיכום וכדומה), יש להשתמש בכותרות מסוג H באופן היררכי (H1 – H6).
  • אין לסמן טקסט חשוב אך ורק באמצעות: Bold, Underline, Italic. רצוי להוסיף התייחסות מילולית כגון "שים לב", "יש להודיע" וכדומה.
  • מומלץ שלא להשתמש בתוכן בקו תחתון עבור ביטויים שאינם לינקים.
  • אין להשתמש בהנחיות לשם הבנה או הפעלה המסתמכות אך ורק על מאפייני חישה כגון צורה, גודל, מיקום, צבע. לדוגמא "לחץ על הכוכב בפינה למעלה".
  • כל תמונה, ללא יוצא מן הכלל מכילה מאפיין Alt המתאר את תוכנה. יש לציין כי תמונות עיצוביות, שאין להן ערך מוסף לגולש יכילו Alt ריק.
  • יש להימנע ככל הניתן משימוש בתמונות של טקסט במקום טקסט חי. אין הדבר כולל לוגו או אלמנטים שחשיבותם עיצובית בלבד.
  • יש לדאוג לחלופה טקסטואלית לכל אלמנט עיצובי (תמונה, גרף וכדומה).
  • לא מומלץ להשתמש בקישורים חסרי משמעות על הבא להתקיים בהמשך, כדוגמת "לחץ כאן".
  • טבלאות נתונים נגישות:
    • יש להשתמש ב-, caption.
    • יש להימנע מטבלאות מורכבות (תאים לא אחידים, מיזוג שורות) או טבלאות בתוך טבלאות.
  • שינוי שפה בתוכן יצוין באמצעות מאפיין lang ב- HTML (עבור פסקה או מאמר, לא ברמת מילה).

הנגשת מסמכי PDF

בכדי להנגיש מסמכי PDF יש להתחיל את התהליך במעבד התמלילים ולבצע המרה לפורמט PDF נגיש באמצעות תוכנת Adobe Acrobat Pro.

  • יש להקפיד על תיוג של כותרות, טבלאות ורשימות.
  • יש לספק חלופה טקסטואלית לאלמנטים גרפיים (תמונות ודיאגרמות).
  • מומלץ להוסיף תוכן עניינים עבור מסמכים ארוכים מאוד.
  • ניתן להנגיש טפסים באופן המאפשר להקליד ערכים בשדות הטקסט על גבי המסמך.
  • ניתן באמצעות התוכנה לערוך מסמכי PDF קיימים על מנת לשפר את נגישותם.
  • ב- Word 2007 ומעלה ניתן לבצע תיוג בסיסי לצרכי נגישות של כותרות, רשימות ותמונות לפני המרת המסמך לפורמטPDF נגיש.

הנחיות נוספות לכולם

טפסים:

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

וידאו ושמע

  • יש לספק חלופה טקסטואלית למדיה המוקלטת מראש, וידאו או אודיו.
    • יש לספק תאור של ההתרחשות, בצורה מובנית.
    • העברת כל המידע (קולי או/וגם חזותי) כדי להבין את ההתרחשות (התסריט) במלואה.
  • עבור מדיה וידאו + שמע (למשל הרצאה) שהוקלטה מראש, יש לספק כתוביות.
  • אין לנגן אודיו של יותר מ- 3 שניות באופן אוטומטי

ערוצי נגישות נוספים

דיוור אלקטרוני (Newsletter)

  • מומלץ לכלול אפשרות להצגת המכתב בגרסה טקסטואלית "Plain text". במיוחד כאשר כל תוכן הדיוור הינו תמונה אחת או רק תמונות.
  • יש ליצור הפרדה ברורה בין הפסקאות ו/או הכתבות באמצעות כותרות וריווח.
  • כל תמונה (גם כפתורים ולינקים), ללא יוצא מן הכלל מכילה מאפיין Alt המתאר את תוכנה. יש לציין כי תמונות עיצוביות, שאין להן ערך מוסף לגולש יכילו Alt ריק.
  • קישורי טקסט ניתנים לזיהוי ע"י קו תחתון או ניגודיות 1:3 מהטקסט סביבם.
  • קישורים כגון "לחץ כאן", "למידע נוסף" יהיו ניתנים להבנה מתוך ההקשר – בתוך משפט.
  • גופן מומלץ לכתיבה ממשפחת Sans-serif כגון Arial, Tahoma, Helvetica.
  • אין לסמן טקסט חשוב אך ורק באמצעות: Bold, Underline, Italic. רצוי להוסיף התייחסות מילולית כגון "שים לב", "יש להודיע" וכדומה.

מדיה חברתית (באנרים שיווקיים)

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

  • יש לשמור על ניגודיות תקינה בבאנרים בין צבע הטקסט לרקע של 1:4.5 לפחות.
    • אין הדבר כולל לוגו או אלמנטים שחשיבותם עיצובית בלבד.
    • עבור טקסטים בעלי קנה מידה גדול תידרש ניגודיות של 1:3.
  • גופנים מומלצים לשימוש ממשפחת Sans-serif כגון Arial, Tahoma, Helvetica.
  • יש לספק את מלוא תוכן הבאנר גם באופן טקסטואלי חי בסמוך לבאנר או קישור לדף / איזור בו ניתן לקבל את המידע באופן חי.
  • חשוב לזכור : הנגשת אתרים תורמת בצורה ישירה לקידום האתר .