הנחיות נגישות לפיתוח, תוכן ועיצוב

תהליך הנגשת אתר אינטרנט הינו הליך מורכב, אשר דורש מכל הגורמים המעורבים בהקמתו לשימת דגש באופן הצגת המידע, כתיבתו, עיצוב הממשק והתאמה לקהלים שונים הנעזרים באמצעים מגוונים לגלישה באינטרנט. כמו כן, במקרים רבים אופי ההנחיה בתקן הישראלי ובתקנות חוק שיוויון זכויות לאנשים עם מוגבלות הינו מופשט ולא כ”צ’קליסט” של הוראות ביצוע מוחלטות, דבר המוסיף מורכבות ניכרת לתהליך. לפניכם מוצג סט לדוגמה של הנחיות כלליות להנגשת אתרי אינטרנט. הנחיות אלו נכתבו ע”י צוות היועצים של חברת A-2-Z במאמץ והשקעה רבה והנכם מוזמנים לעשות בהן שימוש חופשי.

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

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

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

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

• תחביר תקין וסמנטי של קוד העמוד (HTML), פתיחה וסגירה של תגיות.
• שימוש בכותרות H באופן מדורג והיררכי בכל דף מתחילתו ועד סופו.
• ישנה העדפה משמעותית לפקדים סטנדרטיים על פני פקדים מדומים. לדוגמה: שימוש בפקד select ולא לייצר פקד דמוי לינק.
• עיצוב יבוצע אך ורק באמצעות CSS
  • מאפיין style=”” בתוך תגית, תגיות style ב- head, שימוש בקובץ חיצוני עם .
  • לא מומלץ להשתמש במאפייני HTML כדוגמת color=”” או border=””.
• טבלאות נתונים: יש להשתמש ב-, caption. יש להימנע משימוש בטבלאות מורכבות הכוללות rowspan, colspan או טבלאות בתוך טבלאות.
• ככלל, לא מומלץ להשתמש בטבלאות מסוג layout tables אם אינן לשם הצגת נתוני מידע.
• בעת שימוש בטבלאות ובבלוקים של CSS (Div, Span) יש להקפיד כי רצף הקריאה היחסי ישמר גם בעת ביטול CSS ושיטוח הטבלאות (linearized) בעמוד.
• תפריטים חייבים להיות עם טקסט חי אשר מאפשרים זיהוי על ידי תוכנה.
• האתר צריך לתמוך בהגדלתו מבלי שטקסט ייחתך, ייעלם, יעלה זה על זה.
• מומלץ לאפשר מבנה גמיש שלא יגרום להופעת פס גלילה רוחבי.
• שימוש בתגיות lang להגדרת שפת עיקר התוכן בעמוד וכאשר ישנה פסקת טקסט בשפה אחרת.
• כל אלמנט מורכב כדוגמת iframe צריך להכיל מאפיין title.
• ניווט באתר – יש להשתמש באחד מהבאים:
  o מפת אתר (מציג היררכיה של מחלקות האתר אם ישנן)
  o מנוע חיפוש
  o פירורי לחם (breadcrumbs)
• כל תמונה, ללא יוצא מן הכלל מכילה מאפיין Alt המתאר את תוכנה. יש לציין כי תמונות עיצוביות, שאין להן ערך מוסף יכילו Alt ריק (מחרוזת ריקה).
• אלמנטיים המכילים תנועה אוטומטית (תמונה מתחלפת, טקסט רץ) יאפשרו לגולש להפסיקה.
• יש להימנע מרענון אוטומטי או שינוי התוכן בדף כתגובה לפעולה של המשתמש מבלי שניתנה לו על כך התראה מראש.
  • יש להימנע מחלונות קופצים במהלך ניווט בתוך האתר. כל שימוש בפופ-אפ צריך להיות מלווה בהתראה מתאימה מראש.
• יש לאפשר שליטה מלאה על האתר באמצעות המקלדת
  o מוקד המקלדת (פוקוס) יזוהה באופן חזותי על המסך – כל הכפתורים, לינקים ופקדים אחרים.
  o מומלץ להשוות את התנהגות הפקדים בקבלת פוקוס (עם טאב) ל- mouse hover.
  o אין להתערב בסדר הניווט הלוגי ע”י Tabindex (שערכו גדול מ- 0). יש להשתמש רק במקרי קצה.
  o אין לדרוש קצב הקלדה מסויים.
• מומלץ לתייג מונחים מקצועיים או קיצורים שאינם נפוצים עם תגית 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 של כל איזור.
  מחייב את הגולש להתקין תוסף או תוכנה בכדי לעבוד עם זה.

הנחיות נגישות לעיצוב, 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 ריק.
• יש להימנע ככל הניתן משימוש בתמונות של טקסט במקום טקסט חי. אין הדבר כולל לוגו או אלמנטים שחשיבותם עיצובית בלבד.
• יש לדאוג לחלופה טקסטואלית לכל אלמנט עיצובי (תמונה, גרף וכדומה).
• לא מומלץ להשתמש בקישורים חסרי משמעות על הבא להתקיים בהמשך, כדוגמת “לחץ כאן”.
• טבלאות נתונים נגישות:
  o יש להשתמש ב-, caption.
  o יש להימנע מטבלאות מורכבות (תאים לא אחידים, מיזוג שורות) או טבלאות בתוך טבלאות.
• שינוי שפה בתוכן יצוין באמצעות מאפיין lang ב- HTML (עבור פסקה או מאמר, לא ברמת מילה).

הנגשת מסמכי PDF

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

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

טפסים:

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

וידאו ושמע

• יש לספק חלופה טקסטואלית למדיה המוקלטת מראש, וידאו או אודיו.
• יש לספק תאור של ההתרחשות, בצורה מובנית.
• העברת כל המידע (קולי או/וגם חזותי) כדי להבין את ההתרחשות (התסריט) במלואה.
• עבור מדיה וידאו + שמע (למשל הרצאה) שהוקלטה מראש, יש לספק כתוביות.
• אין לנגן אודיו של יותר מ- 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.
• יש לספק את מלוא תוכן הבאנר גם באופן טקסטואלי חי בסמוך לבאנר או קישור לדף / איזור בו ניתן לקבל את המידע באופן חי.
• חשוב לזכור: הנגשת אתרים תורמת בצורה ישירה לקידום האתר .