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

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

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

🔵 ויזואלית 

🔵 מוטורית 

🔵 שמיעתית 

🔵 בעיות נוירולוגיות( למשל פרכוסים)

🔵 לקויות למידה (קשב וריכוז, דיסלקציה ועוד)

🔵 מוגבלויות סביבתיות

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

מצרפת טיפים שיעזרו להנגיש את המוצרים בצורה טובה יותר:

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

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

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

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

⭐ קיצורי דרך במקלדת – הגדירו קיצורי דרך במקלדת שיהיה קל ופשוט יותר לתפעל את המוצר עם יד אחת כאשר יש מוגבלות פיזית או אפילו למשתמשים שאוהבים להגיע ליעדם עם קיצורי דרך ובצורה מהירה יותר. 

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

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

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

⭐ הקפידו שלכל תמונה יהיה טקסט מפורט ב-Alt שמתשמשים כבדי ראייה יוכלו לדעת על מה מדברים בתמונה.

⭐ מומלץ שהמרווחים בין השורות יהיו לפחות פי 1.5 מגודל הטקסט. ורווח בין פסקאת פי שניים. שהטקסט יהיה 14 פיקסלים ולא פחות מ-10 פיקסל לטקסט רץ והעדפה היא שימוש בצבע שחור בכדי שהקונטראסט על הלבן יהיה מובהק. ההנגשה הזאת תעזור למשתמשי עם בעיות למידה וכבדי ראייה שהמרווח הלבן עוזר להם לקרוא ולהבין את הקונטקסט. 

⭐ קונטראסט בין צבעים – שימו לב שיש קונטראסט מובהק בין הטקסט/אלמנט/אייקון לבין הרקע שלו – דבר שיקל או יכביד על הקריאה של הטקסט – חשוב במיוחד אצל עיוורי צבעים וכבדי ראייה.

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