מסגרת focus visible בוורדפרס: למה לעולם לא להסתיר אותה

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

למה זה משנה

עיצוב סטנדרטי בעבר היה *:focus { outline: none; } כדי "לנקות" את המסגרת הכחולה הדיפולטית של דפדפנים. הבעיה: כל ניווט במקלדת נשבר. גולש שלוחץ Tab מעבר על הקישורים והכפתורים, אבל הוא לא יכול לדעת איפה הוא נמצא ברגע נתון. עיוורים שמשלבים מקלדת + קורא מסך, גולשים עם ליקויי מוטוריקה (כדורי טראקבול במקום עכבר), משתמשים מתקדמים שעובדים מקלדת בלבד - כל אלה לא יכולים להשתמש באתר.

זוהי דרישה מפורשת ב-תקני נגישות בינלאומיים רמה AA, תקן 2.4.7 Focus Visible. בנוסף, מאז Safari 15.4 ו-Chrome 86 קיימת תמיכה ב-:focus-visible - pseudo-class שמופעל רק כשה-focus התקבל מהמקלדת ולא מקליק עכבר. זה פותר את "הבעיה האסתטית" של מסגרת מסביב לכפתור אחרי קליק.

איך לזהות

פתח את האתר ולחץ Tab שוב ושוב. אם אתה לא רואה מסגרת או הדגשה כלשהי על הקישור/כפתור הנוכחי - יש בעיה. בדוק את ה-CSS:

grep -rn "outline:\s*none\|outline:\s*0" wp-content/themes/ wp-content/plugins/

חפש outline: none או outline: 0 ב-:focus. כלי בדיקה: axe DevTools מסמן "Element does not have visible focus indicator".

איך לתקן

1. אם מצאת outline: none ב-style.css של התבנית - אל תמחק. הוסף בנוסף את הכלל הבא:

   :focus { outline: none; }
   :focus-visible {
       outline: 2px solid #0066cc;
       outline-offset: 2px;
       border-radius: 2px;
   }

   זה אומר "הסר outline בקליק עכבר, אבל הצג מסגרת ברורה כשמגיעים עם מקלדת".
2. השתמש בצבע ניגודי גבוה ל-outline - לפחות 3:1 מול הרקע. בדוק עם WebAIM Contrast Checker.
3. הוסף outline-offset: 2px - מרווח קל מהאלמנט עצמו, הופך את ה-focus יותר בולט.
4. בדוק תוספי "reset" אגרסיביים בתיקיית התוספים - חלקם מסתירים focus גלובלית. הוסף את ה-CSS שלך אחרי הטעינה שלהם (העתק לתבנית ילד או למקום שטוען מאוחר).
5. בעורך הבלוקים, ה-CSS חל גם על הצד admin אם תוסיף ל-admin_enqueue_scripts.
6. בדוק עם המקלדת בכל סוגי האלמנטים: קישורים בתפריט, כפתור CTA, שדות טופס, תפריט hamburger במובייל.

טעויות נפוצות

• שימוש ב-:focus בלבד בלי :focus-visible: גם קליק עכבר מציג מסגרת, מה שמרגיש מוזר. השתמש בשניהם.
• צבע outline שמתחבא ברקע: outline: 1px solid #ddd על רקע אפור - לא נראה. בדוק contrast.
• החלפת outline ב-box-shadow בלי לבדוק: :focus { box-shadow: 0 0 0 2px #blue; } עובד אבל לא מובחן ע"י כל הדפדפנים. אם משתמשים בו, השאר גם outline-offset: 0 לתאימות לאחור.
• הסרת focus רק מ-button: עובדים עם המקלדת גם על a, input, select, summary. סגנן את כולם.

בדיקה לאחר תיקון

פתח את האתר, לחץ Tab בעמוד הבית. כל אלמנט ש-Tab מגיע אליו אמור להציג מסגרת ברורה. בדוק גם בדפים פנימיים, בטפסים ובתפריטים. הרץ axe DevTools - הקטגוריה "Focus Visible" אמורה להיות ירוקה. ב-RankPlus הסטטוס יחזור לירוק.