קריטריון 2.4.11: פוקוס לא מוסתר (מינימום) רמה AA
בקצרה
קריטריון 2.4.11 פוקוס לא מוסתר (מינימום) (Focus Not Obscured (Minimum), רמה AA) הוא חדש ב-WCAG 2.2. הוא דורש שרכיב המקבל פוקוס מקלדת לא יהיה מוסתר לחלוטין על ידי תוכן אחר (כגון כותרת דביקה, שורת קוקיז, או popup). מספיק שחלק מהרכיב יהיה גלוי. קריטריון זה הוא רמה AA ואינו נדרש לפי ת"י 5568 (מעבר לדרישת התקן, מומלץ).
פרטי הקריטריון
| מספר | 2.4.11 |
|---|---|
| שם | פוקוס לא מוסתר (מינימום) (Focus Not Obscured (Minimum)) |
| רמה | AA |
| גרסה | WCAG 2.2 |
| עיקרון | 2 - ניתן לתפעול (Operable) |
| הנחיה | 2.4 - ניווט |
| מחייב לפי ת"י 5568 | לא - מעבר לדרישת ת"י 5568 (מומלץ) |
מה דורש קריטריון 2.4.11?
קריטריון זה, שנוסף ב-WCAG 2.2, עוסק בבעיה שכיחה: רכיב שמקבל פוקוס מקלדת נסתר מאחורי תוכן צף אחר בעמוד. בתרחיש כזה, המשתמש יודע (אולי) שהפוקוס עבר לאיפשהו, אך אינו יכול לראות לאן - מה שהופך את הניווט במקלדת לחסר ערך. הקריטריון קובע:
- הרכיב לא יוסתר לחלוטין - לפחות חלק ממנו חייב להיות גלוי כשהוא מקבל פוקוס.
- דוגמאות לתוכן שעלול לגרום לכיסוי: כותרת ניווט דביקה (sticky header), סרגל תחתון קבוע, הודעת קוקיז, ווידג'ט שיחה צף, או פאנל שקופת על.
- חריג: אם המשתמש עצמו הציב את התוכן הסוגר (למשל גלל ידנית), הדרישה אינה חלה - היא חלה רק על תוכן שנשלט על ידי האתר ולא על ידי המשתמש.
- זוהי הגרסה המינימלית: מספיק שחלק מהרכיב גלוי. הגרסה המחמירה היא קריטריון 2.4.12 (AAA) שדורש שהרכיב לא יוסתר כלל.
למי זה עוזר?
בעיקר למשתמשי מקלדת שאינם יכולים להשתמש בעכבר - בהם אנשים עם לקויות מוטוריות, משתמשי מקלדת בלבד, ומשתמשי טכנולוגיות מסייעות המנווטות במקלדת (כגון מתגים ומצביעים אלטרנטיביים). ללא קריטריון זה, ייתכן שהפוקוס "ייעלם" מתחת לאלמנט צף ואין דרך לדעת היכן הוא נמצא.
איך עומדים בקריטריון?
- אם יש לכם כותרת דביקה (sticky header) - השתמשו ב-CSS
scroll-padding-topכדי להבטיח שרכיבים שמקבלים פוקוס גולל אוטומטית לתצוגה מתחת לכותרת. - עבור סרגלי תחתון קבועים - הוסיפו
scroll-padding-bottomבהתאם. - הודעות קוקיז ו-popup: ודאו שאינן מכסות רכיבים ניתנים לפוקוס כאשר הם מקבלים פוקוס.
- בדיקת
z-index: ודאו שהסדר השכבתי (stacking order) אינו גורם לרכיבי ממשק לכסות רכיבים ניתנים לפוקוס. - שקלו אם ניתן להשתמש בתצורת ממשק שאינה זקוקה לאלמנטים צפים כבדים.
טיפ
ניתן לבדוק בקלות: פתחו את האתר, לחצו Tab מספר פעמים, ובדקו אם אינדיקטור הפוקוס נסתר מאחורי כותרת דביקה או אלמנט אחר. אם כן, תיקון CSS בסיסי עשוי לפתור את הבעיה.
איך בודקים?
- בדיקה ידנית: נווטו בעמוד עם מקש Tab. עברו על כל הרכיבים האינטראקטיביים ובדקו אם אינדיקטור הפוקוס נסתר בנקודה כלשהי מאחורי כותרת, סרגל, הודעה או תוכן צף אחר.
- שימו לב לאזורים הנוטים לבעיה: ניווטים דביקים, תחתיות קבועות, הודעות GDPR, ווידג'טים של שיחת תמיכה.
- בדיקה בגדלי מסך שונים: בגלישה ממובייל, header דביקה עשויה לתפוס שיעור גדול יותר מהמסך.
- כלים אוטומטיים: נכון לכתיבת מאמר זה, בדיקה זו אינה בשלה לאוטומציה מלאה - נדרשת בדיקה ידנית.
שאלות נפוצות
מה דורש קריטריון 2.4.11?
שרכיב המקבל פוקוס מקלדת לא יהיה מוסתר לחלוטין על ידי תוכן אחר באותו עמוד - כגון כותרת דביקה, סרגל תחתון קבוע, או חלון קופץ. לפחות חלק מהרכיב חייב להיות גלוי עם הפוקוס.
האם קריטריון 2.4.11 הוא חדש ב-WCAG 2.2?
כן. קריטריון 2.4.11 הוא חדש ב-WCAG 2.2 (פורסם בספטמבר 2023). אינו קיים ב-WCAG 2.0 או 2.1. הוא רמה AA אך אינו נדרש לפי ת"י 5568 (המבוסס על WCAG 2.1).
מה ההבדל בין קריטריון 2.4.11 לקריטריון 2.4.12?
קריטריון 2.4.11 (רמה AA) הוא הדרישה המינימלית: הרכיב לא יהיה מוסתר לחלוטין - מספיק שחלק ממנו יהיה גלוי. קריטריון 2.4.12 (רמה AAA) מחמיר יותר: הרכיב לא יהיה מוסתר כלל, אפילו חלקית.
מקורות
- W3C - Understanding SC 2.4.11 Focus Not Obscured (Minimum) (w3.org/WAI)
- W3C - How to Meet WCAG (Quick Reference) (w3.org/WAI/quickref)
צריכים לעמוד בקריטריון הזה באתר שלכם?
ראו את המדריך המעשי להטמעה, או בדקו את האתר מול הצ'ק-ליסט.
לצ'ק-ליסט הנגישות