קריטריון 1.4.13: תוכן בריחוף או בפוקוס רמה AA

בקצרה

קריטריון 1.4.13 תוכן בריחוף או בפוקוס (Content on Hover or Focus, רמה AA) דורש שתוכן הנגלה בעת ריחוף (hover) או פוקוס מקלדת יהיה ניתן להסתרה, ניתן לריחוף ועמיד. קריטריון זה, שנוסף ב-WCAG 2.1, אינו נדרש לפי ת"י 5568 אך מומלץ ליישומו.

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

מספר1.4.13
שםתוכן בריחוף או בפוקוס (Content on Hover or Focus)
רמהAA
גרסהWCAG 2.1
עיקרון1 - מורגש (Perceivable)
הנחיה1.4 - ניתן להבחנה
מחייב לפי ת"י 5568לא - מעבר לדרישת ת"י 5568 (מומלץ)

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

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

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

הקריטריון אינו חל על תוכן שנשלט על-ידי הדפדפן (כמו הסברי title attribute ילידיים) ואינו חל על תוכן תמידי.

למי זה עוזר?

  • משתמשי הגדלת מסך - כשמגדילים ל-200%-400%, ה-tooltip יכול להופיע מחוץ לשדה הראייה הנוכחי. יכולת ריחוף אל התוכן ועמידותו מאפשרת לגלול ולקרוא אותו.
  • אנשים עם רעד בידיים - הצגת tooltip שגורם לשינוי פריסה יכולה לגרום לסמן לצאת ממנו. אפשרות הסגירה ב-Escape מאפשרת שליטה בלי תנועה מדויקת.
  • משתמשי מקלדת - שמקבלים tooltips בעת פוקוס ורוצים לקרוא את תוכנם המלא מבלי לאבד את הפוקוס.
  • אנשים עם לקויות קוגניטיביות - שזקוקים לזמן נוסף לקריאת תוכן הנגלה.

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

  • לתפריטי hover ו-tooltips - הוסיפו מאזין ל-Escape כדי לאפשר סגירה ידנית.
  • ודאו שכאשר הסמן עובר מהטריגר לתוכן הנגלה, התוכן לא נסגר (הוסיפו delay קטן ב-CSS, או עצבו את ה-hover area לכלול גם את הטריגר וגם את התוכן).
  • אל תגדירו timeout אוטומטי לסגירת tooltips.
  • לרכיבים עם aria-describedby tooltip - ודאו שהתוכן נשאר גלוי כל עוד הפוקוס על הטריגר.
  • לתפריטי ניווט - עצבו כך שהתפריט נשאר פתוח כאשר הסמן עובר מהתפריט הראשי לתפריט המשנה.

טיפ

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

איך בודקים?

  • בדיקת hover: הרחיפו על כל רכיב עם tooltip או תפריט משנה - נסו להזיז את הסמן לתוכן שהופיע ובדקו שהוא לא נסגר.
  • בדיקת מקלדת: נווטו לרכיב בלשונית - ודאו שה-tooltip נגלה ונשאר גלוי; לחצו Escape ובדקו שנסגר.
  • בדיקת timeout: ודאו שהתוכן הנגלה אינו נסגר אוטומטית לאחר זמן קבוע.
  • בדיקה ב-zoom 200%: הגדילו את המסך ובדקו שניתן לריחוף אל התוכן שהופיע גם כשהוא נמצא מחוץ לתחום הנראייה הרגיל.

שאלות נפוצות

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

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

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

רמה AA, נוסף ב-WCAG 2.1. הקריטריון אינו מחייב לפי ת"י 5568 (שמבוסס על WCAG 2.0), אך יישומו משפר נגישות עבור משתמשי הגדלת מסך ומשתמשים עם רעד בידיים.

אילו סוגי תוכן מכוסים בקריטריון 1.4.13?

הקריטריון חל על תוכן נוסף שנגלה בעת hover או focus, כגון: tooltip, sub-menu, פופאובר מידע, הסבר כלי. הוא אינו חל על תוכן שנשלט על-ידי הדפדפן עצמו (כמו title attribute native tooltips) ואינו חל על תוכן שתמיד גלוי.

מקורות

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

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

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