WCAG
WCAG הוא הסטנדרט הטכני העולמי (Web Content Accessibility Guidelines) שנועד להבטיח שתוכן דיגיטלי יהיה שמיש עבור כולם, ללא קשר למוגבלות. זהו אינו חוק בפני עצמו, אך הוא הבסיס המקצועי והמשפטי שעליו מסתמכת רוב חקיקת הנגישות בעולם.
Perceivable (תפיסתי)
תוכן המסתמך על חוש אחד בלבד (כמו ראייה או שמיעה) חייב לספק חלופה הניתנת לקליטה בחושים אחרים – למשל, טקסט חלופי (Alt Text) לתמונות או כתוביות בסרטונים.
Operable (תפעולי)
תוכן המסתמך על חוש אחד בלבד (כמו ראייה או שמיעה) חייב לספק חלופה הניתנת לקליטה בחושים אחרים – למשל, טקסט חלופי (Alt Text) לתמונות או כתוביות בסרטונים.
Understandable (מובן)
תוכן המסתמך על חוש אחד בלבד (כמו ראייה או שמיעה) חייב לספק חלופה הניתנת לקליטה בחושים אחרים – למשל, טקסט חלופי (Alt Text) לתמונות או כתוביות בסרטונים.
Robust (יציב)
תוכן המסתמך על חוש אחד בלבד (כמו ראייה או שמיעה) חייב לספק חלופה הניתנת לקליטה בחושים אחרים – למשל, טקסט חלופי (Alt Text) לתמונות או כתוביות בסרטונים.
P.O.U.R
עקרונות P.O.U.R הם ארבעת עמודי התווך של ה-WCAG. אלו הן ארבע הקטגוריות המרכזיות בתקן, המגדירות שכל תוכן דיגיטלי חייב להיות: ניתן לתפיסה (Perceivable), ניתן לתפעול (Operable), מובן (Understandable), ויציב (Robust) מספיק כדי לעבוד עם טכנולוגיות מסייעות.
AAA
זוהי הרמה המתקדמת ביותר, השואפת לספק את הנגישות המקיפה ביותר. קשה ומורכב לעמוד בה בכל חלקי האתר, והיא בדרך כלל מיושמת בחלקים ספציפיים של אתרים המיועדים לקהלים ייעודיים.
AA
זו הרמה המומלצת והנפוצה ביותר, והיא המטרה ברוב הפרויקטים. היא מספקת נגישות טובה למגוון רחב של משתמשים, והיא הסטנדרט שרוב החוקים והתקנות בעולם מתייחסים אליו. עמידה ברמה זו מבטיחה חוויה טובה וכוללת.
A
זוהי רמת הנגישות המינימלית. היא מטפלת במחסומים הקריטיים ביותר שמונעים מאנשים עם מוגבלויות מסוימות לגשת לתוכן. אי עמידה ברמה זו משמעה שהאתר פשוט אינו שמיש עבורם. זו נקודת ההתחלה.
3
לשמור על איזון
כדי לעזור לנו להבין אם אתר הוא נגיש, תקן ה-WCAG מגדיר שלוש 'רמות תאימות'. אפשר לחשוב עליהן כמו על דרגות קושי או רמות של הצלחה. הן נותנות לנו שפה משותפת ומטרה ברורה לשאוף אליה (ופה הממוצע לגמריי מספיק).
ארגז הכלים
תחנה ממוקדת המכילה רק את הסעיפים שאתם, כמעצבים, צריכים להכיר.
צבע וניגודיות
למה זה חשוב?
טקסט עם ניגודיות נמוכה יכול להיות קשה או בלתי אפשרי לקריאה עבור משתמשים עם לקויות ראייה או עיוורון צבעים. מדובר על מיליוני אנשים שפשוט לא יצליחו לקרוא את מה שעיצבנו.
מה לעשות?
יש לשמור על יחס קונטרסט של לפחות 4.5:1 לטקסט רגיל, ו-3:1 לטקסט גדול.
מומלץ להשתמש בכלים הבודקים ניגודיות (קיימים כפלאגינים לפיגמה או תוספים לדפדפן)
זהירות מיוחדת נדרשת עם טקסט אפור על רקעים צבעוניים – זו מלכודת נפוצה.
רמה: AA
רפרנס: (Success Criterion 1.4.3)
DONT
Contrast ratio: 2.00:1 (Fail)
יחס ניגודיות נמוך מקשה על הקריאה, במיוחד עבור משתמשים עם לקויות ראייה.
DO
Contrast ratio: 6.20:1 (Pass)
יחס ניגודיות גבוה (4.5:1 ומעלה לטקסט רגיל) מבטיח שהתוכן יהיה ברור וקריא לקהל הרחב ביותר.
למה זה חשוב?
משתמשים עם עיוורון צבעים (כ-8% מהגברים) עלולים לפספס לחלוטין מידע שמועבר רק באמצעות צבע. למשל, שדה חובה שצבוע באדום ללא סימן נוסף.
מה לעשות?
-
יש לוודא שלכל מידע שמועבר בצבע יש חלופה ויזואלית נוספת: אייקון, קו תחתון, טקסט מודגש, וכו'.
-
לדוגמה, בהודעת שגיאה, בנוסף לצבע האדום, יש להוסיף אייקון אזהרה וטקסט שמסביר את השגיאה.
רמה: A
רפרנס: (Success Criterion 1.4.1)
DONT
כדי להמשיך בתהליך, יש ללחוץ על הקישור הבא
כשהסימן היחיד לקישור הוא צבע, קל מאוד לפספס אותו. משתמשים רבים, לא רק כאלה עם עיוורון צבעים, פשוט לא יבינו שניתן ללחוץ כאן.
DO
כדי להמשיך בתהליך, יש ללחוץ על הקישור הבא
הקו התחתון הוא סימן ויזואלי חזק שאינו תלוי בצבע. הוא מבטיח הבנה מיידית שהטקסט הזה הוא קישור לחיץ.
-
למה זה חשוב?
-
גם רכיבים שאינם טקסט, כמו אייקונים, גבולות של שדות קלט, וכפתורים, צריכים להיות ברורים וניתנים לזיהוי.
מה לעשות?
-
יש לוודא שלרכיבי ממשק חיוניים ולאייקונים יש יחס קונטרסט של לפחות 3:1 עם הרקע שמאחוריהם.
-
זה חשוב במיוחד במצבים כמו hover או focus כדי שהמשתמש יבין את השינוי.
רמה: AA
רפרנס: (Success Criterion 1.4.11)
DONT
השינוי בגוון הרקע כל כך עדין עד שהוא כמעט בלתי מורגש. הפידבק הוויזואלי חלש ולא מספק אינדיקציה ברורה שהרכיב אינטראקטיבי.
DO
כאן, השינוי במצב ה-hover הוא חד, ברור ובעל ניגודיות גבוהה. אין שום ספק שהתרחשה אינטראקציה, והפידבק למשתמש הוא מיידי ונגיש.
-
טיפוגרפיה
למה זה חשוב?
משתמשים רבים עם לקויות ראייה מסתמכים על היכולת להגדיל את הטקסט בדפדפן (Zoom) כדי לקרוא בנוחות.
מה לעשות?
-
יש לוודא שהעיצוב נשאר שמיש וקריא גם כאשר המשתמש מגדיל את הטקסט ב-200% בדפדפן.
-
חשוב לוודא ששורות טקסט לא "בורחות" מהקונטיינר שלהן או חופפות לטקסט אחר בזמן הגדלה.
רמה: AA
רפרנס: (Success Criterion 1.4.4)
DONT
אני טקסט שתקוע בתוך קונטיינר עם גובה קבוע. אם מישהו ינסה להגדיל אותי כדי לראות טוב יותר, חצי מהמסר שלי פשוט ייחתך וייעלם לנצח. בבקשה, שחררו אותי לחופשי. השתמשו ב-Hug Contents.
כאן, לקונטיינר של הטקסט יש גובה קבוע. כאשר המשתמש מגדיל את הטקסט, הוא נחתך ואינו ניתן לקריאה, ומידע חשוב הולך לאיבוד.
DO
אני טקסט שתקוע בתוך קונטיינר עם גובה קבוע. אם מישהו ינסה להגדיל אותי כדי לראות טוב יותר, חצי מהמסר שלי פשוט ייחתך וייעלם לנצח. בבקשה, שחררו אותי לחופשי. השתמשו ב-Hug Contents.
כאן, הקונטיינר גמיש ומאפשר לטקסט לתפוס את המקום שהוא צריך. כל התוכן נשאר זמין וקריא, והפריסה מתאימה את עצמה לגודל הטקסט.
-
למה זה חשוב?
טקסט שהוא חלק מתמונה (Images of Text) הוא בלתי נגיש לחלוטין לקוראי מסך, אי אפשר להגדיל אותו מבלי שיאבד מאיכותו, ואי אפשר להתאים את צבעיו.
מה לעשות?
-
יש להשתמש בטקסט אמיתי (HTML) בכל הזדמנות אפשרית.
-
החריג היחיד הוא לוגואים, שבהם הטקסט הוא חלק מהותי מהמותג.
רמה: AA
רפרנס: (Success Criterion 1.4.5)
DONT
זהו טקסט בתוך תמונה.
כשהטקסט מובנה בתוך התמונה, הוא מאבד את כל תכונותיו האינטראקטיביות. אי אפשר לסמן, להעתיק או לחפש אותו, והוא הופך לבלתי נגיש לטכנולוגיות מסייעות.
DO
טקסט חי (HTML) הוא אינטראקטיבי ונגיש. סמן הטקסט משתנה, ניתן לבחור ולהעתיק אותו, והכי חשוב - הוא נשאר קריא וברור עבור כל המשתמשים והטכנולוגיות.
-
כפתורים וקישורים
למה זה חשוב?
משתמשים שמנווטים בעזרת מקלדת בלבד חייבים לראות בצורה ברורה על איזה רכיב הם "עומדים" בכל רגע נתון. ללא חיווי פוקוס, הם פשוט "עיוורים" ולא יודעים איפה הם בעמוד.
מה לעשות?
-
יש לעצב מצב focus ברור לכל הרכיבים האינטראקטיביים (כפתורים, קישורים, שדות טופס). העיצוב המקובל הוא מסגרת חיצונית (outline) ברורה ובולטת.
-
חשוב לוודא שלעולם לא "מעלימים" את חיווי הפוקוס הדיפולטיבי של הדפדפן מבלי לספק חלופה עיצובית טובה יותר.
רמה: AA
רפרנס: (Success Criterion 2.4.7)
DONT
Defult
Focus
כאן, חיווי הפוקוס הוסתר לחלוטין. משתמש שמנווט עם מקלדת הגיע לכפתור, אך אין לו שום דרך לדעת זאת. הממשק הופך לבלתי שמיש עבורו.
DO
Defult
Focus
כאן, עיצבנו מצב פוקוס ברור, בולט וניגודי. משתמש המקלדת יודע בדיוק היכן הוא נמצא ויכול להמשיך לנווט בביטחון.
-
למה זה חשוב?
משתמשי קורא מסך לעיתים קרובות מנווטים בעמוד על ידי קפיצה מקישור לקישור. אם כל הקישורים נקראים "לחצו כאן", אין להם דרך להבין לאן כל קישור מוביל.
מה לעשות?
-
יש לכתוב טקסטים לקישורים שמתארים בבירור את היעד שלהם.
-
במקום: "למידע נוסף, לחצו כאן." -> יש לכתוב: "קראו עוד על עקרונות הנגישות P.O.U.R."
רמה: AA
רפרנס: (Success Criterion 2.4.4)
DONT
לחצו כאן
למידע נוסף,
בניווט לפי קישורים, טקסט גנרי כמו "לחצו כאן" אינו מספק מידע על היעד. הדבר מקשה על ההתמצאות, במיוחד עבור משתמשי קורא מסך.
DO
קראו עוד על עקרונות הנגישות P.O.U.R
טקסט קישור תיאורי מבהיר את מטרת הקישור והיעד שלו עוד לפני הלחיצה. זה יוצר ניווט ברור ונגיש לכלל המשתמשים.
-
תמונות ומדיה
למה זה חשוב?
טקסט חלופי הוא מה שקורא מסך מקריא למשתמש עם עיוורון כשהוא מגיע לתמונה. בלעדיו, כל המידע הויזואלי שבתמונה פשוט אובד.
מה לעשות?
-
לכל תמונה שמעבירה מידע, יש לכתוב תיאור קצר ותמציתי שמתאר מה רואים בה.
-
אם התמונה היא קישוטית בלבד ואינה מעבירה מידע, יש להשאיר את הטקסט החלופי ריק (alt="").
רמה: A
רפרנס: (Success Criterion 1.1.1)
DONT
כאן, הטקסט החלופי הוא שם הקובץ. הוא טכני לחלוטין ואינו מספק שום מידע שימושי למשתמשי קורא מסך על תוכן התמונה או על ההקשר שלה בעמוד.
alt="IMG_8754.jpg"
DO
כאן, הטקסט החלופי מתאר את האדם שבתמונה, את תפקידו ואת הסיטואציה. הוא מספק חוויה שוות ערך למשתמשים שאינם רואים את התמונה.
alt= "מאיה כהן, מנהלת הפרויקט שלנו, יושבת ליד החלון במשרד ומחייכת."
-
טפסים
למה זה חשוב?
תוויות (Labels) הן מה שמסביר למשתמש מה עליו להזין בכל שדה. ללא תווית ברורה ומקושרת, משתמשי קורא מסך לא יידעו מה השדה דורש מהם.
מה לעשות?
-
יש לוודא שלכל שדה בטופס (שם, אימייל, סיסמה וכו') יש תווית טקסט (<label>) שגלויה תמיד.
-
יש להימנע משימוש בטקסט placeholder בלבד כתווית, מכיוון שהוא נעלם לאחר ההקלדה.
רמה: A
רפרנס: (Success Criterion 3.3.2)
DONT
כאן, התווית מופיעה כטקסט placeholder ונעלמת בעת ההקלדה. זה מקשה על המשתמש לזכור מה נדרש ממנו, וחשוב מכך - רוב קוראי המסך אינם מזהים placeholder כתווית תקינה.
-
למה זה חשוב?
כאשר משתמש מזין מידע שגוי בטופס, המערכת חייבת להסביר לו בדיוק מה השגיאה ואיפה היא התרחשה, כדי שיוכל לתקן אותה.
מה לעשות?
-
בנוסף להדגשת השדה השגוי (למשל, עם מסגרת אדומה), יש להציג הודעת טקסט ברורה שמסבירה את הבעיה ("נא להזין כתובת אימייל תקינה").
-
מומלץ למקם את הודעת השגיאה קרוב לשדה הרלוונטי.
רמה: A
רפרנס: (Success Criterion 3.3.1)
DONT
דואר אלקטרוני
כאן, החיווי היחיד לשגיאה הוא צבע. המשתמש לא יודע מה בדיוק הטעות (האם השדה ריק? האם הפורמט שגוי?), ואינו מקבל שום הנחיה כיצד לתקן אותה. זו חוויה מתסכלת.
DO
דואר אלקטרוני
wrongmail#gmail.com
נראה שכתובת האימייל אינה תקינה. ודאו שהיא כוללת את הסימן @
כאן, המשוב הוא מיידי, ברור ושימושי. הוא משתמש בצבע ואייקון לזיהוי מהיר, ומספק הודעת טקסט שמסבירה למשתמש בדיוק מה הבעיה ("אינה תקינה") ואיך לתקן אותה ("ודאו שיש @").
-
ניווט ומבנה
למה זה חשוב?
משתמשי קורא מסך משתמשים בכותרות (H1, H2, H3...) כדי "לסרוק" את העמוד ולהבין את המבנה שלו, בדומה לאופן שבו משתמשים רואים סורקים עמוד ויזואלית.
מה לעשות?
-
יש להשתמש בכותרות לפי הסדר ההיררכי שלהן. לא לדלג מ-H1 ל-H4.
-
אין להשתמש בסגנונות של כותרות רק כדי להשיג אפקט ויזואלי (למשל, טקסט גדול ומודגש). יש להשתמש בהן כדי לתאר את מבנה התוכן.
רמה: AA
רפרנס: (Success Criterion 2.4.6)
DONT
ANI LOGO
H1
אני כותרת ראשית בתוך עמוד
H2
אני כותרת של סקשן ראשי בתוך העמוד.
H3
ויש לי אחלה תת כותרת
H4
ואני כותרת של תת-סקשן בתוך סקשן של H2
H5
וגם לי יש תת כותרת
כאן, נעשה שימוש בסגנונות של כותרות (H2, H3 וכו') ללא סדר היררכי הגיוני, אלא רק למטרות עיצוב. התוצאה היא "תוכן עניינים" שבור הפוגע בחוויה של משתמשי קורא מסך ובקידום האתר (SEO).
DO
ANI LOGO
H1
אני כותרת ראשית בתוך עמוד
H2
אני כותרת של סקשן ראשי בתוך העמוד.
Paragraph / lead
ויש לי אחלה תת כותרת
H3
ואני כותרת של תת-סקשן בתוך סקשן של H2
Paragraph / lead
וגם לי יש תת כותרת
כאן, הכותרות מסודרות בסדר היררכי נכון. המבנה לוגי, קל לניווט עבור כלל המשתמשים, וידידותי למנועי חיפוש.
-
למה זה חשוב?
כאשר משתמש מנווט עם מקלדת (באמצעות מקש Tab), הפוקוס צריך לעבור בין הרכיבים בעמוד בסדר הגיוני וצפוי, בדרך כלל משמאל לימין ומלמעלה למטה (או מימין לשמאל בעברית).
מה לעשות?
-
כמעצבים, עלינו לוודא שהפריסה הויזואלית של העמוד תואמת לסדר הקריאה ההגיוני.
-
יש להימנע מעיצובים שבהם הסדר הויזואלי שונה לחלוטין מסדר הקוד, מה שעלול ליצור "קפיצות" פוקוס לא צפויות.
רמה: A
רפרנס: (Success Criterion 2.4.3)
DONT
כאן, סדר הפוקוס אינו תואם לסדר הויזואלי. כתוצאה מכך, משתמש המקלדת שלוחץ Tab 'יקפוץ' בצורה לא הגיונית בין השדות, מה שיוצר חוויה מתסכלת ומבלבלת.
-