אינדיקטור המיקוד, שמסומן לעיתים קרובות על ידי "טבעת מיקוד", מזהה את הרכיב שמוגדר כרכיב המיקוד בדף. למשתמשים שלא יכולים או לא רוצים להשתמש בעכבר, האינדיקטור הזה חשוב מאוד, כי הוא מחליף את מצביע העכבר.
אם סימן המיקוד שמוגדר כברירת מחדל בדפדפן מתנגש עם העיצוב שלכם, אתם יכולים להשתמש ב-CSS כדי לשנות את הסגנון שלו. חשוב לזכור להתחשב במשתמשים.
שימוש ב-:focus כדי להציג תמיד את אינדיקטור המיקוד
הפסאודו-קלאס :focus מוחל על רכיבים במצב ממוקד, ללא קשר לשיטת הקלט או למכשיר (כמו עכבר, מקלדת או סטיילוס) שנמצאים בשימוש.
לדוגמה, לרכיב <div> הבא יש tabindex שמאפשר להתמקד בו, עם סגנון מותאם אישית למצב :focus שלו:
div[tabindex="0"]:focus {
outline: 4px dashed orange;
}
לא משנה באיזה מכשיר משתמשים, הסמל <div> נראה אותו דבר כשהוא במצב מודגש.
לצערנו, יש הבדלים בין הדפדפנים באופן שבו הם מיישמים את המיקוד. היכולת של רכיב לקבל מיקוד עשויה להיות תלויה בדפדפן ובמערכת ההפעלה.
לדוגמה, ל<button> הבא יש CSS מותאם אישית למצב :focus שלו.
button:focus {
outline: 4px dashed orange;
}
אם לוחצים על <button> באמצעות העכבר ב-Chrome ב-macOS, אמור להופיע סגנון המיקוד המותאם אישית שלו. עם זאת, לא תראו את סגנון ההדגשה המותאם אישית אם תלחצו על <button> ב-Safari ב-macOS. הסיבה לכך היא שב-Safari האלמנט לא מקבל מיקוד כשלוחצים עליו.
התנהגות המיקוד לא עקבית. כדי לוודא שסגנונות ההדגשה מקובלים על המשתמשים, כדאי לבדוק את הדף במכשירים שונים ועם קלט שונה.
שימוש ב-:focus-visible כדי להציג באופן סלקטיבי אינדיקטור מיקוד
הפסאודו-מחלקות :focus-visible מוחלות כשאלמנט מקבל מיקוד והדפדפן קובע (באמצעות היוריסטיקה) שהצגת אינדיקטור מיקוד תועיל למשתמש. בפרט, אם האינטראקציה האחרונה של המשתמש הייתה עם מקלדת והקשה על המקש לא כללה את המקשים meta, ALT, OPTION או CONTROL, אז :focus-visible יתאים.
בדוגמה הבאה, לחצן מציג באופן סלקטיבי את סימן המיקוד. אם משתמשים בעכבר כדי ללחוץ על התוצאה, היא שונה מאשר אם משתמשים במקלדת כדי להגיע אליה באמצעות מקש Tab.
button:focus-visible {
outline: 4px dashed orange;
}
שימוש ב-:focus-within כדי להגדיר סגנון לאלמנט הראשי של אלמנט שהתמקדתם בו
הפסאודו-קלאס
:focus-within
מוחל על אלמנט כשהאלמנט עצמו מקבל מיקוד או כשאלמנט צאצא מקבל מיקוד. אפשר להשתמש בו כדי להדגיש אזור בדף ולמשוך את תשומת הלב של המשתמש לאזור הזה.
לדוגמה, טופס מקבל מיקוד גם כשבוחרים בטופס עצמו וגם כשבוחרים באחד מלחצני הבחירה שלו.
form:focus-within {
background: #ffecb3;
}
מתי להציג אינדיקטור מיקוד
שאלה טובה לשאול את עצמכם היא: "אם הייתם לוחצים על הרכיב הזה בזמן השימוש במכשיר נייד, האם הייתם מצפים שמקלדת תוצג?"
- אם כן: אמצעי הבקרה צריך תמיד להציג אינדיקטור מיקוד, ללא קשר להתקן הקלט. לדוגמה, זה כמעט תמיד נכון לגבי הרכיב
<input type="text">. המשתמש צריך לשלוח קלט לאלמנט באמצעות המקלדת, בלי קשר לאופן שבו אלמנט הקלט מקבל את המיקוד. - אם לא: יכול להיות שהרכיב יציג אינדיקטור למיקוד באופן סלקטיבי. לדוגמה, כשמשתמש לוחץ על
<button>באמצעות עכבר או מסך מגע, הפעולה הושלמה. יכול להיות שאין צורך באינדיקטור מיקוד. עם זאת, אם המשתמש מנווט באמצעות מקלדת, כדאי להציג לו אינדיקטור מיקוד כדי שהוא יוכל להחליט אם הוא רוצה להפעיל את הפקד באמצעות המקשים Enter או רווח.
לא להשתמש ב-outline: none
הדרך שבה הדפדפנים מחליטים מתי לצייר אינדיקטור למיקוד היא, למען האמת, מאוד מבלבלת. שינוי המראה של אלמנט <button> באמצעות CSS או הקצאת אלמנט tabindex גורמים להפעלת התנהגות ברירת המחדל של טבעת המיקוד בדפדפן.
לפעמים, מפתחים מסירים את אינדיקטור המיקוד באמצעות CSS:
/* Don't do this!!! */
:focus {
outline: none;
}
דרך טובה יותר לעקוף את הבעיה היא לשלב בין :focus לבין :focus-visible polyfill. בלוק הקוד הראשון ממחיש איך ה-polyfill פועל, ובאפליקציה לדוגמה שמתחתיו אפשר לראות דוגמה לשימוש ב-polyfill כדי לשנות את אינדיקטור המיקוד בלחצן.
/*
This hides the focus indicator if the element receives focus with a
mouse, but it still shows up on keyboard focus.
*/
.js-focus-visible :focus:not(.focus-visible) {
outline: none;
}
/*
Optionally: Define a strong focus indicator for keyboard focus.
If you choose to skip this step, then the browser's default focus
indicator will be displayed instead.
*/
.js-focus-visible .focus-visible {
...
}