איך מציגים חיוויים כמו שגיאה או הצלחה בצורה נגישה?

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

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

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

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

שימו לב גם לקונטרסט

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

WCAG 2.2 סעיף 1.4.1 – Use of Color (רמת A)
WCAG 2.2 סעיף 1.4.11 – Non-text Contrast (רמת AA)
WCAG 2.2 סעיף 3.3.1 – Error Identification (רמת A)

איך ניגשים לנגישות של חיוויים בתוך הדיזיין סיסטם?

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

מה להגדיר ברמת היסודות והאטומים

• צבעים סמנטיים – טוקנים ברורים לשגיאה, הצלחה ואזהרה עם קונטרסט של לפחות 3:1 מול הרקע.

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

מה להגדיר ברמת הקומפוננטות והפאטרנים

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

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

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