המדריך לנגישות אתר אינטרנט ברמה WCAG 2.1 AA

14/10/2022
נגישות אתרים
אין תגובות

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

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

5 הקטגוריות העיקריות של מוגבלות הן:

חזותי – דוגמה: עיוורון, ראייה לקויה, עיוורון צבעים
שמיעה – דוגמה: חירש וכבד שמיעה
מוטורי – דוגמה: קושי בשימוש עם תנועות יד מסוימות ושיתוק
דיבור – דוגמה: אנשים שאינם מסוגלים לדבר או שיש להם לקות בדיבור
קוגניטיבי – דוגמה: דיסלקציה, אוטיזם, ADHD

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

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

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

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

נגישות דיגיטלית: מה זה ולמה זה חשוב

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

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

מה זה טכנולוגיה מסייעת בנגישות אתר אינטרנט ?

הטכנולוגיות הבאות עוזרות לאנשים להשתמש במחשבים כדי לגשת לאינטרנט:

קוראי מסך: תוכנה המשמשת אנשים עיוורים או לקויי ראייה לקריאת תוכן מסך המחשב. כמו תוכנת JAWS עבור וינדוס, או תוכנת NVDA.

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

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

תוכנת קלט דיבור: מספקת לאנשים עם קושי בהקלדה דרך חלופית להקלדת טקסט וגם לשלוט במחשב. משתמשים יכולים לתת למערכת כמה פקודות לביצוע פעולות. משתמשים יכולים לומר למערכת ללחוץ על קישור או כפתור. דוגמאות לכך יהיו Dragon Naturally Speaking עבור Windows או Mac. שימו לב שגם ל-Windows וגם ל-Mac יש כמה כלי עזר לזיהוי דיבור, אך לא ניתן להשתמש בהם כדי לגלוש באינטרנט.

התקני קלט חלופיים:

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

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

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

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

מה זה WCAG 2.1 ברמה AA

זה מדריך כללי של WCAG 2.1 רמה AA. הוא אינו מחליף את הנחיות WCAG 2.1, המספקות הסבר מלא של כל העקרונות והדרישות.

הנחיות הנגישות לתוכן אינטרנט (הידועות כ- WCAG) הן קבוצה מוכרת בינלאומית של המלצות לשיפור נגישות האינטרנט.

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

ראייה – כמו לקויי ראייה חמורים (עיוורים), לקויי ראייה (חלקי ראייה) או עיוורי צבעים
שמיעה – כמו אנשים חירשים או כבדי שמיעה
ניידות – כמו אלה שמתקשים להשתמש בעכבר או מקלדת
חשיבה והבנה – כמו אנשים עם דיסלקציה, אוטיזם או קשיי למידה

עמידה בדרישות הנגישות בישראל

בישראל אתר מונגש הוא אתר שבוצע בו התאמות לפי תקן ישראלי 5568.

בישראל אנו מחוייבים ללכת לפי התקנות של WCAG 2.0.

אני ממליץ לכולם להתעדכן ולהנגיש את האתר שלכם לפי התקנות החדשות של WCAG 2.1 רמה AA כחלק מעמידה בדרישות הנגישות.

בנוסף כל אתר צריך לרשום עמוד הצהרת נגישות

עקרונות עיצוב WCAG 2.1

WCAG 2.1 מבוסס על 4 עקרונות עיצוב:

ניתן לתפיסה – perceivable
ניתן לתפעול – operable
מובן – understandable
חוסן – robust

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

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

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

יישום הנחיות WCAG 2.1

העקרונות של WCAG 2.1 נתמכים על ידי 13 קווים מנחים. כל אחד מאלה מחולק לדרישות ספציפיות (או 'קריטריונים להצלחה') שהשירות שלך צריך לעמוד בהן.

אתה צריך לעשות בדיקות נגישות קבועות כדי לבדוק שהעיצוב, הקוד והתוכן שלך עומדים ב- WCAG רמת AA. לשם כך, עליך לעמוד בכל דרישות A ו-AA.

עליך להשתמש בשילוב של כלים אוטומטיים ובדיקות ידניות כדי לזהות בעיות אפשריות.

עקרון 1: ניתן לתפיסה

כדי לעמוד ב-WCAG 2.1 עקרון 1: ניתן לתפיסה, עליך לוודא שמשתמשים יכולים לזהות את השירות שלך ולהשתמש בו עם החושים הזמינים להם.

זה אומר שאתה צריך לעשות דברים כמו:

לספק חלופות טקסט ('alt text') עבור תוכן שאינו טקסט כמו תמונות
לספק תמלילים עבור אודיו ווידאו
לספק כתוביות לווידאו
ודא שהתוכן בנוי בצורה הגיונית וניתן לנווט ולקרוא אותו על ידי קורא מסך – זה עוזר גם אם גיליונות הסגנונות מושבתים
השתמש בסימון המתאים לכל תכונה (לדוגמה, טפסים וטבלאות נתונים), כך שהיחסים בין התוכן מוגדרים כראוי
לא להשתמש בצבע כדרך היחידה להסביר או להבחין במשהו
השתמש בצבעי טקסט המופיעים בבירור על צבע הרקע
ודא שניתן להשתמש בכל תכונה כאשר גודל הטקסט גדל ב-200% וכי התוכן זורם מחדש לעמודה בודדת כאשר הוא מוגדל ב-400%
לא להשתמש בתמונות עם טקסט ואם עשית את זה אז לספק alt text
ודא שהשירות שלך מגיב – למשל למכשיר של המשתמש, לכיוון העמוד ולגודל הגופן שהוא אוהב להשתמש
ודא שהשירות שלך עובד היטב עם טכנולוגיות מסייעות – לדוגמה, הודעות חשובות מסומנות בצורה שקוראי המסך יודעים שהן חשובות

עקרון 2: ניתן לתפעול

כדי לעמוד ב-WCAG 2.1 עקרון 2: ניתן לתפעול, עליך לוודא שמשתמשים יכולים למצוא את התוכן שלך ולהשתמש בו, ללא קשר לאופן שבו הם בוחרים לגשת אליו (לדוגמה, באמצעות מקלדת או פקודות קוליות).

זה אומר שאתה צריך לעשות דברים כמו:

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

עקרון 3: מובן

כדי לעמוד ב-WCAG 2.1 עקרון 3: מובן, עליך לוודא שאנשים יכולים להבין את התוכן שלך וכיצד השירות עובד.

זה אומר שאתה צריך לעשות דברים כמו:

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

עקרון 4: חוסן

כדי לעמוד ב-WCAG 2.1 עקרון 4: חוסן, עליך לוודא שהתוכן שלך יכול להתפרש בצורה מהימנה על ידי מגוון רחב של סוכני משתמשים (כולל דפדפנים מיושנים למדי, עדכניים וטכנולוגיות מסייעות).

זה אומר שאתה צריך לעשות דברים כמו:

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