WCAG2.co.ilפורטל התקן הישראלי לנגישות
כלים חינמיים בדיקה עצמית

קריטריון 2.4.13: מראה הפוקוס רמה AAA

עודכן לאחרונה: יוני 2026זמן קריאה: כ-4 דקותנכתב ונבדק ע"י מערכת WCAG2.co.il

בקצרה

קריטריון 2.4.13 מראה הפוקוס (Focus Appearance, רמה AAA) הוא חדש ב-WCAG 2.2. הוא קובע דרישות כמותיות מחמירות לאינדיקטור הפוקוס: עובי מינימלי של 2px ויחס ניגודיות של 3:1 לפחות בין אינדיקטור הפוקוס לרקע שמאחוריו. קריטריון זה הוא רמה AAA ואינו נדרש לפי ת"י 5568.

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

מספר2.4.13
שםמראה הפוקוס (Focus Appearance)
רמהAAA
גרסהWCAG 2.2
עיקרון2 - ניתן לתפעול (Operable)
הנחיה2.4 - ניווט
מחייב לפי ת"י 5568לא - רמה AAA, אינה נדרשת

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

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

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

הדרישות הכמותיות הן מה שמבדיל קריטריון זה מ-2.4.7 (פוקוס נראה, רמה AA) שדורש רק שהפוקוס יהיה גלוי, ללא סף מדיד.

למי זה עוזר?

בעיקר למשתמשים עם ראייה מוגבלת שמסתמכים על פוקוס המקלדת לניווט אך מתקשים לראות אינדיקטורי פוקוס דקים או בעלי ניגודיות נמוכה. הקריטריון מסייע גם למשתמשים עם לקויות קוגניטיביות ולמשתמשים המנווטים במקלדת בתנאי תאורה קשים. גם מי שמשתמש בדפדפן ברקע כהה (dark mode) עשוי להרוויח מאינדיקטור עם ניגודיות מובטחת.

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

  • הגדירו בסגנון CSS מסגרת פוקוס (outline) בעובי של לפחות 2px: :focus-visible { outline: 2px solid #005fcc; outline-offset: 2px; }
  • בחרו צבע לאינדיקטור הפוקוס שיש לו יחס ניגודיות של לפחות 3:1 מול הרקע שמאחוריו (בדקו עם כלי כמו WebAIM Contrast Checker).
  • אל תסירו את ה-outline בלי להחליפו בחלופה ניגודית ראויה (outline: none ללא תחליף הוא טעות נפוצה).
  • בדקו את הניגודיות גם על רקעים שונים - לרוב גוונים שונים ברחבי האתר.
  • שקלו להשתמש ב-:focus-visible (במקום :focus) להצגת הפוקוס רק בניווט מקלדת, תוך שמירה על עמידה בניגודיות.

טיפ

צבע כחול כהה (#005fcc) על רקע לבן (#ffffff) מספק יחס ניגודיות של כ-7:1 - מעל הסף הנדרש. צבע שחור (#000000) על רקע לבן מספק ניגודיות של 21:1. הימנעו מאינדיקטורי פוקוס בגוונים בהירים על רקע בהיר.

איך בודקים?

  • בדיקה חזותית: נווטו עם Tab ובדקו שאינדיקטור הפוקוס ניכר וברור על כל הרכיבים האינטראקטיביים.
  • מדידת ניגודיות: השתמשו בכלי Color Contrast Analyzer (NVAccess) או WebAIM Contrast Checker כדי למדוד את יחס הניגודיות בין צבע אינדיקטור הפוקוס לרקע.
  • מדידת עובי: בדקו בכלי פיתוח הדפדפן שה-outline-width הוא לפחות 2px.
  • בדיקה ב-dark mode: ודאו שאינדיקטור הפוקוס גלוי ובעל ניגודיות מספקת גם במצב כהה.
  • כלים אוטומטיים: חלק מכלי הבדיקה (כמו axe DevTools) מזהים outline: none - אך לא תמיד מודדים את הניגודיות של אינדיקטורי פוקוס מותאמים.

שאלות נפוצות

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

שאינדיקטור הפוקוס יעמוד בדרישות מחמירות: (1) שטח הפריים (focus indicator) יקיף את הרכיב ויהיה בעובי מינימלי של 2px לפחות; (2) הניגודיות בין צבע אינדיקטור הפוקוס לצבע הרקע שמאחוריו תהיה יחס של 3:1 לפחות. הדרישות הללו חלות על מצב הפוקוס בלבד.

האם קריטריון 2.4.13 חדש ב-WCAG 2.2?

כן. קריטריון 2.4.13 הוא חדש ב-WCAG 2.2 (פורסם בספטמבר 2023) ואינו קיים ב-WCAG 2.0 או 2.1. הוא רמה AAA ואינו נדרש לפי ת"י 5568.

מה ההבדל בין קריטריון 2.4.7 לקריטריון 2.4.13?

קריטריון 2.4.7 (רמה AA, WCAG 2.0) דורש רק שאינדיקטור הפוקוס יהיה גלוי - ללא דרישות כמותיות לגודל או ניגודיות. קריטריון 2.4.13 (רמה AAA, WCAG 2.2) מוסיף דרישות מחמירות: עובי מינימלי של 2px ויחס ניגודיות של 3:1 לפחות.

מקורות

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

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

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