למה באמת?
הרי קיים כבר מצב פוקוס. הבעיה איתו שהוא מופיע כל הזמן. בין אם שימוש בעזרת עכבר או טאץ. הדבר זה מפריע עיצובית לבעלי אתרים ולמעצבים והם מרגישים שצריך להתפשר כדי שאתר יהיה נגיש.
כדי לעקוף בעיה זו בעבר השתמשו בעזרת JAVA SCRIPT. זה אפשר הפרדה עיצובית בין משתמשי עכבר למשתמשי מקלדת. החסרון העיקרי שזה לא תמיד היה עיקבי ולעיתים היה בעייתי ליישם.
כיום בעזרת מאפיין focus-visible החדש ניתן לצור הפרדה ויזואלית איכותית וקלה מבלי להתפשר על העיצוב.
מהו :focus-visible?
:focus-visible היא הגדרת CSS מודרנית, שנועדה לתת למפתחים שליטה חכמה על עיצוב מצב פוקוס, רק כאשר המשתמש באמת זקוק לה. היא מופעלת רק כאשר הדפדפן מזהה שהמשתמש הגיע לאלמנט באמצעות מקלדת או טכנולוגיה מסייעת, ולא דרך עכבר או מסך מגע.
במילים פשוטות:
:focus-visible אומרת לדפדפן – "תציג סימן פוקוס רק כשזה נחוץ".
למה צריך את זה?
לפי תקני נגישות, חובה לסמן אלמנטים שנמצאים בפוקוס – אחרת משתמשי מקלדת לא יידעו היכן הם נמצאים. מצד שני, כשמשתמש לוחץ עם העכבר, פוקוס גלוי יכול להיראות מיותר או מטריד עיצובית.
focus-visible פותר את הדילמה הזו:
הוא מציג פוקוס רק כשזה באמת נחוץ – בלי לפגוע בנגישות, ובלי לקלקל את העיצוב.
מתי הוא מופעל?
- בעת ניווט עם מקלדת (TAB, Shift+Tab, חיצים)
- כאשר האלמנט מקבל פוקוס תכנותי (למשל בעת טעינה)
- לא מופעל כאשר משתמש מקליק עם העכבר או במסך מגע
יתרונות נגישות של :focus-visible
- מונע מצב של "אין לי מושג איפה אני" אצל משתמשים עם מוגבלות
- מאפשר לשלב חוויית משתמש אלגנטית לעכבר, מבלי לוותר על הנגשה
- מגן מפני טעויות נפוצות כמו הסרת פוקוס מוחלטת
- נתמך ברוב הדפדפנים המודרניים (Chrome, Edge, Firefox, Safari החדשים)
טיפים וטעויות נפוצות
מתי כן להשתמש:
- כדי לעצב פוקוס שייראה טוב במקלדת, מבלי להפריע במצב עכבר
- כאשר אתם רוצים לנהל פוקוס ידנית באמצעות JavaScript
מתי לא להשתמש:
- כתחליף ל־:focus אם אתם רוצים תמיכה מלאה לאחור (דפדפנים ישנים לא תומכים בו)
- במערכות שלא נבדקו בקפדנות במקלדת – ייתכן שפוקוס לא יוצג בכלל
תחליפים לדפדפנים ישנים
אם אתם חייבים תמיכה רטרואקטיבית, אפשר לשלב ספריית JavaScript בשם what-input או לכתוב לוגיקה מותאמת לזיהוי אמצעי קלט.
לסיכום
:focus-visible הוא כלי עוצמתי לשיפור הנגישות והעיצוב גם יחד. הוא מאפשר פוקוס חכם – שמופיע רק כשצריך, ונעלם כשלא. השימוש בו מומלץ בכל פרויקט מודרני שרוצה לאזן בין אסתטיקה לנגישות אמיתית.