קריטריון 2.5.8: גודל יעד (מינימום) רמה AA

בקצרה

קריטריון 2.5.8 גודל יעד (מינימום) (Target Size (Minimum), רמה AA) הוא קריטריון חדש ב-WCAG 2.2. הוא דורש שגודל יעד הלחיצה או הנגיעה יהיה לפחות 24x24 פיקסל CSS, או שיהיה מרווח מספיק מסביב. קריטריון זה אינו מחייב לפי ת"י 5568 הנוכחי, אולם יישומו מומלץ.

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

מספר2.5.8
שםגודל יעד (מינימום) (Target Size (Minimum))
רמהAA
גרסהWCAG 2.2
עיקרון2 - ניתן לתפעול (Operable)
הנחיה2.5 - אופני קלט
מחייב לפי ת"י 5568לא - מעבר לדרישת ת"י 5568 (מומלץ)

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

קריטריון זה, שנוסף לראשונה ב-WCAG 2.2, דורש שגודל יעד הלחיצה של רכיבים אינטראקטיביים יעמוד על לפחות 24x24 פיקסל CSS. הקריטריון מגדיר שני מסלולים לעמידה בו:

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

החריגים שבהם הדרישה אינה חלה:

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

לדרישה מחמירה יותר (44x44 פיקסל, ללא חריגים), ראו קריטריון 2.5.5 (AAA).

למי זה עוזר?

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

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

  • הגדירו min-height: 24px; min-width: 24px; לכל כפתור, קישור ופקד שאינם בתוך טקסט רץ.
  • אם הרכיב קטן מ-24px - הוסיפו padding שיגדיל את אזור הלחיצה הכולל ל-24px לפחות.
  • ודאו מרווח מינימלי מסביב לרכיבים אינטראקטיביים קטנים - כך שרכיבים סמוכים אינם מתחרים.
  • השתדלו לשאוף ל-44x44 פיקסל (קריטריון 2.5.5 AAA) כאשר עיצוב מאפשר זאת - זהו הסטנדרט המומלץ לחוויית משתמש טובה.
  • בדקו רכיבים קטנים כגון: כפתורי סגירה (X), תיבות סימון (checkbox) קטנות, כפתורי ניווט בכרוסלה.

טיפ

נוסחת ה-offset: אם יעד גבוה 20px, הוא צריך מרווח של לפחות 4px מכל יעד סמוך (24 פחות 20 = 4). ניתן לבדוק זאת בכלי מפתח על-ידי מדידת המרחק בין bounding boxes של רכיבים סמוכים.

איך בודקים?

  • בדיקה בכלי מפתח: מדדו את גובל הרכיב (bounding box) של כל רכיב אינטראקטיבי - ודאו שאינו קטן מ-24x24 פיקסל.
  • לרכיבים קטנים: בדקו שהמרווח בינם לבין רכיבים סמוכים עונה על נוסחת ה-offset.
  • כלים אוטומטיים: חלק מכלי בדיקת נגישות (כגון Axe DevTools Pro) מזהים יעדים קטנים מ-24x24.
  • בדיקה בנייד: נסו ללחוץ על רכיבים קטנים בסמארטפון - אם הלחיצה מדויקת קשה, ייתכן שהרכיב לא עומד בדרישה.

שאלות נפוצות

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

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

מהי רמת הקריטריון 2.5.8?

רמה AA. הקריטריון נוסף ב-WCAG 2.2 ולכן אינו נכלל בדרישות ת"י 5568 הנוכחי המבוסס על WCAG 2.0, אולם יישומו מומלץ מאוד.

מה ההבדל בין קריטריון 2.5.8 לקריטריון 2.5.5?

קריטריון 2.5.8 (AA, WCAG 2.2) דורש מינימום 24x24 פיקסל עם חריגים רחבים יותר. קריטריון 2.5.5 (AAA, WCAG 2.1) דורש מינימום 44x44 פיקסל עם חריגים מצומצמים יותר. 2.5.8 הוא דרישת הרף הנמוך ברמה AA.

מקורות

צריכים לעמוד בקריטריון הזה באתר שלכם?

ראו את המדריך המעשי להטמעה, או בדקו את האתר מול הצ'ק-ליסט.

לצ'ק-ליסט הנגישות