קריטריון 1.4.11: ניגודיות לא-טקסטואלית רמה AA

פרטי הקריטריון

מה דורש קריטריון 1.4.11?

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

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

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

למי זה עוזר?

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

איך עומדים בקריטריון?

• בדקו את יחס הניגודיות של גבולות שדות קלט ביחס לרקע (3:1 לפחות).
• ודאו שמסגרות כפתורות ורדיו-בטונים (תיבות סימון) ניכרות בבירור על הרקע.
• לגרפים ותרשימים - השתמשו בשילוב של צבע ותבנית (קו מלא, קו מקווקו, נקודות) לאפשר הבחנה גם ללא צבע.
• ודאו שאינדיקטור הפוקוס (outline) של רכיבים אינטראקטיביים עומד ביחס 3:1 ביחס לצבע הסמוך.
• בדקו גם מצבים מיוחדים: hover, focus, checked, error - כל מצב צריך לעמוד בדרישה.

איך בודקים?

• בדיקה ידנית: זהו את גבולות שדות הקלט, הכפתורות ותיבות הסימון - מדדו את יחס הניגודיות שלהם ביחס לרקע.
• כלי בדיקת ניגודיות: השתמשו בכלים כמו Colour Contrast Analyser, WebAIM Contrast Checker, או axe DevTools.
• בדיקת גרפים: בחנו אם קטעי הגרף ניתנים להבחנה גם ללא שימוש בצבע (על-ידי שינוי הצגה לגווני אפור).
• כלים אוטומטיים כמו axe יכולים לזהות חלק מהבעיות, אך אינם מכסים את כל המקרים - נחוצה בדיקה ידנית.