קריטריון 2.5.5: גודל יעד (מוגבר) רמה AAA
בקצרה
קריטריון 2.5.5 גודל יעד (מוגבר) (Target Size (Enhanced), רמה AAA) דורש שגודל יעד הלחיצה או הנגיעה של רכיבים אינטראקטיביים יהיה לפחות 44x44 פיקסל CSS. זהו הקריטריון המחמיר בנושא גודל יעד. הוא אינו מחייב לפי ת"י 5568 - רמה AAA אינה נדרשת. לדרישת AA ראו קריטריון 2.5.8.
פרטי הקריטריון
| מספר | 2.5.5 |
|---|---|
| שם | גודל יעד (מוגבר) (Target Size (Enhanced)) |
| רמה | AAA |
| גרסה | WCAG 2.1 |
| עיקרון | 2 - ניתן לתפעול (Operable) |
| הנחיה | 2.5 - אופני קלט |
| מחייב לפי ת"י 5568 | לא - רמה AAA, אינה נדרשת |
מה דורש קריטריון 2.5.5?
הקריטריון דורש שגודל יעד הלחיצה או הנגיעה (target size) של כל רכיב אינטראקטיבי יהיה לפחות 44x44 פיקסל CSS. מדובר בגודל הפיזי של האזור הניתן ללחיצה, לא של המראה הגרפי בלבד.
החריגים שבהם הדרישה אינה חלה:
- ריווח מקביל - אם היעד קטן מ-44x44 אך יש ריווח מספיק מסביב כך שהמרחב הכולל ללחיצה הוא 44x44.
- שווה-ערך - אם קיים יעד חלופי בגודל מספיק לאותה פעולה באותו עמוד.
- משפטי - יעד הנדרש בגודל מסוים לפי חוק.
- חיוני - הגדלת הגודל תשנה מהותית את המידע הגלום ביעד.
ל-דרישת AA (פחות מחמירה), ראו קריטריון 2.5.8 שנוסף ב-WCAG 2.2 ומגדיר מינימום של 24x24 פיקסל.
למי זה עוזר?
- אנשים עם מוגבלויות מוטוריות שקשה להם לכוון לחיצות במדויק - יעד גדול יותר מפחית את הצורך בדיוק.
- אנשים עם רעד ידיים שזקוקים לאזור לחיצה גדול ומרוחק מאלמנטים סמוכים.
- משתמשים בגיל מבוגר שתיאום עין-יד עלול להיות פחות מדויק.
- כלל משתמשי מגע - אצבע אנושית ממוצעת רחבה כ-10mm, ויעד של 44px מספק שטח נוח לנגיעה.
איך עומדים בקריטריון?
- הגדירו
min-height: 44px; min-width: 44px;לכפתורים, קישורים ופקדים אינטראקטיביים. - אם הרכיב הגרפי קטן יותר - הגדילו את אזור הלחיצה עם
paddingאו::before/::afterשקוף. - הבטיחו מרווח מינימלי בין יעדים סמוכים כדי למנוע לחיצה שגויה.
- לאייקונים קטנים - עטפו אותם בכפתור בגודל 44x44 עם
display:flex; align-items:center; justify-content:center;.
טיפ
הנחיות ממשק של Apple ו-Google ממליצות על גודל מינימלי של 44-48 פיקסל ליעדים ניידים - תכנון לפי המלצות אלו מקרב אתכם לעמידה בקריטריון.
איך בודקים?
- בדיקה בכלי מפתח: השתמשו ב-DevTools לבדיקת גודל ה-bounding box של כל יעד אינטראקטיבי.
- בדיקה ויזואלית: הפעילו שכבת הדגשה של יעדים לחיצים ובדקו שאינם קטנים מ-44x44.
- כלים אוטומטיים כגון Axe DevTools Pro יכולים לזהות יעדים קטנים מדי - בדקו תחת "Touch Target Size".
- בדיקה בנייד: נסו ללחוץ על כפתורים קטנים בסמארטפון ובדקו את קלות הלחיצה בפועל.
שאלות נפוצות
מה דורש קריטריון 2.5.5?
הקריטריון דורש שגודל יעד הלחיצה או הנגיעה של כל רכיב אינטראקטיבי יהיה לפחות 44x44 פיקסל CSS, למעט מקרים שבהם היעד קטן יותר אך ישנו מרווח מספיק מסביב, הגדלה תשנה את הפריסה, הגדלה מסופקת בממשק, הרכיב משפטי, או שהגדלה חיונית לתפקוד.
מהי רמת הקריטריון 2.5.5?
רמה AAA - הרמה הגבוהה ביותר. הקריטריון נוסף ב-WCAG 2.1 ולכן אינו נכלל בדרישות ת"י 5568. לדרישת גודל יעד ברמה AA, ראו קריטריון 2.5.8.
מה ההבדל בין קריטריון 2.5.5 לקריטריון 2.5.8?
קריטריון 2.5.5 (AAA, WCAG 2.1) דורש 44x44 פיקסל ללא חריגים מהותיים. קריטריון 2.5.8 (AA, WCAG 2.2) דורש 24x24 פיקסל עם חריגים רחבים יותר. 2.5.8 הוא הדרישה המחייבת הנמוכה יותר שנוספה ב-WCAG 2.2.
מקורות
- W3C - Understanding SC 2.5.5 Target Size (Enhanced) (w3.org/WAI)
- W3C - How to Meet WCAG (Quick Reference) (w3.org/WAI/quickref)
צריכים לעמוד בקריטריון הזה באתר שלכם?
ראו את המדריך המעשי להטמעה, או בדקו את האתר מול הצ'ק-ליסט.
לצ'ק-ליסט הנגישות