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

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

למה דווקא בשלב העיצוב

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

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

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

4 העקרונות שמאחורי ההנחיות

הנחיות WCAG, שעליהן מבוסס גם התקן הישראלי 5568, מחולקות לארבעה עקרונות. בתרגום לשפה של מעצבים:

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

ניגודיות צבעים בין טקסט לרקע

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

סוג טקסט	יחס מינימלי ברמה AA	ברמה AAA
טקסט רגיל	4.5:1	7:1
טקסט גדול: 18 נקודות (24 פיקסלים) ומעלה, או 14 נקודות מודגש (כ-18.7 פיקסלים) ומעלה	3:1	4.5:1
רכיבי ממשק וגרפיקה חיונית (גבול שדה, אייקון של כפתור)	3:1	3:1

1. קחו את קוד הצבע של הטקסט (למשל #767676) ואת קוד הצבע של הרקע.
2. פתחו בודק ניגודיות חינמי והזינו את שני הקודים.
3. בדקו את התוצאה לטקסט רגיל ולטקסט גדול בנפרד.
4. אם הצבע נכשל, הכהו אותו בהדרגה עד שהוא עובר, ושמרו את הקוד החדש בפלטת המותג.

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

בסרטון: בדיקת ניגודיות בלייב

• 0:00 אחרי הדרכה לצוות מעצבי ממשק: למה צריך לבדוק כל צבע.
• 1:06 הזנת קוד צבע הטקסט וקוד צבע הרקע בבודק.
• 1:38 סגול על לבן: עובר בטקסט גדול, נכשל בטקסט רגיל.
• 2:43 בחירת גוון כהה יותר עד שהצבע עובר בכל הגדלים.

פונט קריא

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

בסרטון: הנחיות פונט למעצבים

• 0:00 אילו פונטים בעייתיים: כתב יד, מחוברים, דקים, שקופים.
• 0:33 מה לבקש: פונט רחב עם אותיות מופרדות.
• 1:04 למה זה פוגע גם בחוויה של משתמשים שרואים היטב.

היררכיית כותרות ותוכן

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

טקסט על תמונה

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

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

הרחבתי על זה במאמר טקסט מוטמע בתמונה.

כפתורים, תנועה, חיפוש וטפסים

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

עיצוב רספונסיבי בלי לאבד תוכן

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

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

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

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

1. אפיון ברור ופשוט, ותוכן שנכתב מראש בשפה פשוטה.
2. כל צמד צבעים של טקסט ורקע נבדק בבודק ניגודיות.
3. פונט ברור בכל האתר, בגודל שנוח לקריאה.
4. היררכיית כותרות ברורה בכל תבנית.
5. אין טקסט שקיים רק בתוך תמונה.
6. כפתורים בולטים, ואין תוכן מהבהב.
7. גרסת מובייל לכל תבנית, עם כל התוכן.
8. כל תבנית נשלחה לבדיקה, וקיבלתם משוב מכמה אנשים בגילים שונים לפני העלייה לאוויר.

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