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

קריטריון 2.4.7: פוקוס נראה רמה AA

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

בקצרה

קריטריון 2.4.7 פוקוס נראה (Focus Visible, רמה AA) דורש שכל ממשק הניתן לתפעול במקלדת יציג מחוון פוקוס גלוי כאשר הוא מקבל פוקוס. אסור להסיר את ה-outline של הדפדפן בלי לספק חלופה גלויה. זהו קריטריון מחייב לפי ת"י 5568.

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

מספר2.4.7
שםפוקוס נראה (Focus Visible)
רמהAA
גרסהWCAG 2.0
עיקרון2 - ניתן לתפעול (Operable)
הנחיה2.4 - ניווט
מחייב לפי ת"י 5568כן

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

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

  • הסרת ה-outline בעזרת outline: none ו-outline: 0 ב-CSS ללא חלופה.
  • עיצוב פוקוס שמוסתר מאחורי אלמנטים אחרים (ייחודי ל-WCAG 2.4.11 שהוא קריטריון נפרד).
  • אלמנטים מותאמים-אישית (div עם tabindex) שאינם מציגים פוקוס כלל.

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

למי זה עוזר?

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

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

  • אל תסירו את ה-outline ללא חלופה: הימנעו מ-outline: none ו-outline: 0 על אלמנטים אינטראקטיביים.
  • אם אתם רוצים עיצוב פוקוס מותאם - עצבו אותו ב-:focus או :focus-visible בצורה שנראית בבירור.
  • השתמשו ב-:focus-visible כדי להציג פוקוס רק לניווט מקלדת (לא לקליק עכבר) - זה מאפשר עיצוב נקי יותר מבלי לפגוע בנגישות.
  • לאלמנטים מותאמים-אישית (כמו div עם tabindex="0") - הוסיפו סגנון פוקוס מפורש ב-CSS.
  • ודאו שמחוון הפוקוס ניתן להבחנה ביחס לרקע (לניגודיות מספקת - ראו קריטריון 1.4.11).

טיפ

כלל CSS אחד בסיסי שמסייע: :focus-visible { outline: 3px solid #005fcc; outline-offset: 2px; }. ניתן להתאים את הצבע לפלטת האתר כל עוד הוא ניתן להבחנה.

איך בודקים?

  • בדיקה ידנית: נווטו בכל העמוד עם Tab בלבד. על כל אלמנט אינטראקטיבי - האם ניתן לראות היכן הפוקוס?
  • חפשו בקוד CSS את הביטויים outline: none, outline: 0 ו-outline:none - ובדקו אם יש חלופה מתאימה.
  • בדקו כפתורים, קישורים, שדות טופס, תפריטים נפתחים ורכיבים מותאמים - כולם צריכים מחוון פוקוס.
  • כלים אוטומטיים כמו axe מזהים חלק מהמקרים, אך בדיקה ידנית היא הכרחית.

שאלות נפוצות

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

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

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

רמה AA. הקריטריון נכלל ב-WCAG 2.0 ולכן הוא מחייב לפי ת"י 5568.

האם מותר לכתוב outline: none ב-CSS?

הסרת ה-outline ללא חלופה גלויה מהווה הפרה של קריטריון 2.4.7. אם ברצונכם לעצב את מחוון הפוקוס בצורה שונה - ניתן לעשות זאת, אך יש לוודא שהחלופה גלויה וניתנת להבחנה. אפשר להשתמש ב-:focus-visible כדי להציג פוקוס רק לניווט מקלדת.

מקורות

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

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

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