נגישות אתרים - איך מנגישים אתר אינטרנט?

הקדמה קצרה על סוגי המוגבלויות:

1. מוגבלות פיזית - מגבלות בתנועה או בתפקוד הגופני.
   שיתוק מוחין (CP), קטיעות גפיים, ניוון שרירים. שיתוק מלא או חלקי.
   
   
2. מוגבלות חושית - מגבלות בתפקוד החושים.
   לדוגמה: לקות ראייה או עיוורון: אנשים עם קושי חלקי או מלא בראייה.
   לקות שמיעה או חירשות: קושי בשמיעה עד חוסר שמיעה מוחלט.
   
   
3. מוגבלות שכלית-התפתחותית - מגבלות בתפקוד השכלי או ההתפתחותי, המתחילה לרוב מגיל צעיר.
   דוגמאות: תסמונת דאון, אוטיזם (ASD), מאפיינים: קושי בלמידה, חשיבה מופשטת, תפקוד יומיומי.
   
   
4. מוגבלות קוגניטיבית - קושי בתהליכים כמו זיכרון, ריכוז, פתרון בעיות, קבלת החלטות.
   דוגמאות: פגיעת ראש טראומטית (TBI), אלצהיימר או דמנציה.
   
   
5. מוגבלות תקשורתית - קושי בהבעה או הבנה של שפה מדוברת או כתובה.
   דוגמאות: גמגום, אפרקסיה של הדיבור.
   
   
6. מוגבלות בלתי נראית - מוגבלויות שאינן ניכרות לעין אך משפיעות על החיים.
   לדוגמה: אפילפסיה.

מהו התקן לנגישות?

התקן לנגישות אתרים נקבע על מנת להבטיח שאנשים עם מוגבלות יוכלו להשתמש באינטרנט בצורה שוויונית ונוחה. בישראל, התקן לנגישות אתרים מבוסס על מסמך WCAG 2.0 (Web Content Accessibility Guidelines) של ארגון W3C. התקן מעוגן בתקנות הנגישות של חוק שוויון זכויות לאנשים עם מוגבלות (תשנ"ח-1998).

עקרונות עיקריים בתקן נגישות אתרים:

ה-WCAG 2.0 מחולק לארבעה עקרונות בסיסיים:

1. ניתן לתפיסה (Perceivable) - מידע ורכיבים חייבים להיות נגישים לכל החושים, לדוגמה:
   טקסט חלופי (alt text) לתמונות, כתוביות לסרטונים, ניגודיות מספקת בין טקסט לרקע.
   
2. ניתן לתפעול (Operable) - המשתמשים חייבים להיות מסוגלים לנווט באתר ולהשתמש בו.  לדוגמה:
   ניווט מקלדת מלא (ללא צורך בעכבר), מנגנונים לדילוג על תוכן שחוזר על עצמו, התאמה למכשירים שונים (רספונסיביות).
   
3. מובן (Understandable) - התוכן צריך להיות ברור וקל להבנה. לדוגמה:
   טקסט פשוט ומדויק ככל האפשר, שפה ברורה והוראות מפורטות, תצוגה עקבית של תפריטים ורכיבים אחרים.
   
4. חסין (Robust) - האתר צריך לעבוד עם טכנולוגיות מסייעות שונות ולהישאר נגיש בעתיד.  לדוגמה:
   תאימות לקוראי מסך, שימוש בקוד HTML תקני.

דרגות תאימות:

התקן WCAG 2.0 כולל שלוש רמות תאימות:

A (בסיסית): הדרישות המינימליות לנגישות.

AA (מתקדמת): הדרישות המומלצות לנגישות (הנדרשת על פי חוק בישראל).

AAA (מתקדמת מאוד): התאמה מלאה אך אינה מחייבת.

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

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

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

אז בתכלס... איך מנגישים אתר אינטרנט?

סה"כ התקנות מכילות 40-44 סעיפים שיש לוודא שהם מיושמים באתר.

הסעיפים והדרישות, מרוכזות הקובץ EXCEL שניתן להוריד אותו מכאן:  טופס בדיקת נגישות אתר אינטרנט (קישור לטופס באתר משרד המשפטים)
או מכאן:  טופס בדיקות נגישות לאתר אינטרנט

ההתאמות הדרושות תקפות לכל עמודי האתר, והן:

1. חלופה טקסטואלית
   לספק חלופה טקסטואלית לאובייקטים שאינם קריאים, לדוגמה: תמונה, לוגו, סרט וידאו. - תאור המתאר את התמונה.
   תמונת רקע לדוגמה שאין לה משמעות וחשיבות ואינה מעבירה מידע, אפשר להשאיר את ה-ALT ריק. (""=Alt).
   כלים כמו אימות Captcha - צריך לספק חלופה טקסטואלית.
2. אודיו בלבד / וידאו בלבד
   לאודיו בלבד, צריך לספק חלופה טקסטואלית המכילה את כל המידע הרלוונטי להבנת התוכן.
   לוידאו בלבד (מוקלט מראש) - יש תסריט טקסטואלי או ערוץ אודיו המתאר את הערוץ הוויזואלי.
   לוידאו המשודר באונליין - תרגום סימולטני (מומלץ, לא מחויב לאתרים ברמה AA).
   לוידאו - יופיעו כתוביות מסונכרנות.
   הערה:  סעיף 35 ד' לחוק קובע כי "חייב בהנגשת תוכני וידאו" - רשות ציבורית או עסק שהמחזור הממוצע שלו עולה על 5,000,000 ש"ח בשנה
3. היררכיית כותרות, תוכן, מידע וקישורים.
   קיימת הפרדה מלאה בין ה-CSS לקוד האתר HTML. (קבצים נפרדים)
   כתיבת קוד סמנטי:
   א. כותרות: שימוש <h1> to <h6> לזהות כותרות
   ב. רשימות: שימוש <ul>, <ol>, and <dl>לרשימות או קבוצות של קישורים (כולל תפריטים)
   ג. טקסטים מיוחדים: שימוש בסימון סמנטי כדי לסמן טקסט מודגש או מיוחד (לדוגמא <strong>, <code>, <abbr>, <block quote>)
   ד. טבלאות: שימוש בסימון טבלה להצגת מידע טבלאי (TH לתאי כותרת או scope attribute), וכן שימוש ב caption elements כדי לשייך כותרת טבלת נתונים עם טבלת נתונים, וב Summary element בהתאם לצורך.
   ה. טפסים: שימוש label elements לשייך תוויות טקסט עם פקדי טופס. מתן תיאור עבור קבוצות של פקדי טופס באמצעות קבוצת שדות וlegend elements.
   אזורים בעמוד: אזורים בעמוד (תפריט ניווט, איזור ראשי וכד') מוגדרים באמצעות landmarks (רצוי)
4. כאשר הסדר שבו מוצג תוכן משפיע על המשמעות של התוכן, הרצף יקבע בקוד
   (שימו לב לסדר המידע בקוד יש השפעה על האופן בו הוא מוקרא לעיוורים העושים שימוש בקורא מסך)
5. הוראות אינן מסתמכות על צבע, צורה, או מיקום על המסך (לדוגמא, "לחץ על הכפתור המרובע כדי להמשיך", או "קרא את הוראות בצבע כחול")
6. הוראות אינן מסתמכות על סאונד (לדוגמא, המתן להישמע צפצוף כדי לעבוד לשלב הבא).
7. שליטה באודיו - קיים מנגנון עצירה או הפסקה, או לשליטה בעוצמה של אודיו המנגן אוטומטית בדף במשך למעלה מ 3 שניות.
8. קונטרסט - עבור כל הטקסטים בעמוד - יחס-קונטרסט של לפחות 1:4.5 בטקסט רגיל.
   בטקסט גדול (over 18 point or 14 point bold) יחס של לפחות 1:3
9. הגדלת טקסט - כאשר מגדילים את הטקסט ב 200% (פי 2) אין פגיעה במידע ובפונקציונאליות של העמוד.
10. תמונות של טקסט - אם טכנולוגית ניתן להשיג את אותה תצוגה ויזואלית באמצעות טקסט חי (למשל טקסט חי על תמונת רקע) אין להשתמש בטקסט שמבוסס על תמונה.
11. TAB/ENTER - כל הפעולות באתר ניתנות לביצוע באמצעות מקלדת לחיצה על מקש tab)
12. פוקוס על קישורים - מעבר לוגי אינטואיטיבי ומותאם למבנה המסך בין קישורים, פקדים וכדומה.
13. רכיבים שאינם HTML מאפשרים שימוש מלא במקלדת המותאם להתנהגות רכיבי html.
14. כאשר רכיב בדף מקבל פוקוס הדבר לא מעורר שינוי משמעותי בדף (פתיחת דף נוסף, הופעת popup, העברת הפוקוס לרכיב אחר וכדומה)
15. הדף אינו כולל "מלכודות מקלדת" (אלמנטים שניתן להגיע אליהם באמצעות המקלדת אך לא ניתן לנווט מהם הלאה)
16. הגדרת זמן - בכל מצב בו יש הגבלת זמן לקריאה, תגובה או פעולה (כולל time out), למשתמש ניתנת אפשרות לבטל, להאריך, או להתאים לעצמו את הגבלת הזמן. (למעט מקרים בהם הגבלת הזמן היא מעל 20 שעות).
17. הפסקה / עצירה / הסתרה של תוכן נע:
    א. ניתן להפסיק, לעצור או להסתיר מידע מהבהב, נע או נגלל (שמופיע במשך יותר מ 5 שניות)
    ב.יש לקבוע מנגנון שיאפשר למשתמש לעצור, להפסיק או להסתיר מידע המתעדכן באופן אוטומטי, או שיאפשר שליטה בתדירות העדכון, אם המידע (1) מופיע באופן אוטומטי,
    (2) מוצג במקביל לתוכן אחר; למעט מקרים שבהם העדכון האוטומטי מהותי לפעולה.
18. הבהוב או ריצוד - אין הבהוב או ריצוד על במסך בקצב של יותר משלוש פעמים בשנייה או general flash and red flash thresholds.
19. קפיצה לאזורי תוכן - קיים מנגנון לעקיפת בלוקים (יחידות קבועות שחוזרות על עצמן במספר עמודים כגון תפריטים, באנרים וכד'). המנגנון תומך בניווט ישיר לתוכן העמוד.
20. כותרת העמוד TITLE - לכל העמודים יש כותרת - page title - ייחודית המתארת את תוכן / פונקציונאליות של העמוד.
21. מטרת הקישור - ברורה מתוך טקסט הקישור או מתוך הקונטקסט (המשפט או הפסקה בו הוא נמצא).
    בכל מקרה שעלול להיווצר חוסר בהירות מסופק title לקישור שמסביר במדוייק ובאופן מלא מהי מטרת הקישור.
22. ריבוי דרכים לאיתור דף באתר - יש יותר מדרך אחת להגיע לעמוד (אלא אם הוא שלב בתהליך או תוצאה של תהליך): דרכים אפשריות - מפת אתר, מנגנון חיפוש, תוכן עניינים, תפריט המכיל את כל העמודים באתר, bookmarks במסמכי PDF.
23. כותרות ותוויות - כותרות ותוויות ברורות המבהירות בברור את הנושא או המטרה.
24. כותרות לקטעים - יש שימוש בכותרות כדי לזהות קטעים (sections - ברמת הקוד. לא נראה לעין לגולש)
25. תוכן עם 2 שפות ויותר - בכל מקום בתוכן בו יש שינוי של שפת הכתיבה מצוין השינוי בקוד באמצעות Lang attribute
26. ניווט עקבי - מנגנוני ניווט באתר מופיעים באותו סדר בכל פעם בה הם חוזרים על עצמם ויש להם אותו זיהוי.
27. טפסים באתר: זיהוי שגיאה. - הודעות שגיאה - בטופס אם ניתן לזהות שגיאות של המשתמש באופן אוטומטי מופיעה הודעת שגיאה טקסטואלית. אם ידועות הצעות לתיקון, אזי ההצעות ניתנות למשתמש, אלא אם כן זה עלול לחבל באבטחה או במטרה של התכנים.
    הודעת השגיאה מזוהה גם על ידי קוראי מסך.
28. תוויות והוראות - כאשר המשתמש נדרש להזים מידע מסופקות לו תוויות והוראות
29. סטנדרטיזציה - בשימוש ב markup languages:
    א. לכל אלמנט יש tag התחלה וסיום לפי הסטנדרטים
    ב. אין attributes כפולים
    ג. כל ה IDs ייחודים
    ד. יש nesting נכון על פי הסטנדרטים
30. שם תפקיד וערך של אובייקטים - (יוטמע ברמת הקוד של האתר)
    א. עבור כל רכיבי ממשק המשתמש (כולל אך לא מוגבל ל: אלמנטים בטופס, קישורים ורכיבים שנוצרו על ידי תסריטים), השם והתפקיד של הרכיב מזוהים בקוד; מצבים מאפיינים וערכים שהמשתמש יכול להגדיר ניתנים מוגדרים בקוד; והודעה על שינויים בפריטים אלה זמינה לסוכני משתמש, כולל טכנולוגיות מסייעות (כגון קוראי מסך)
    ב. כמו כן, לכל frame ו iframe יש title המתאר את מטרתו
    
    

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