אינדיקטור המיקוד, שמסומן לעיתים קרובות על ידי "טבעת מיקוד", מזהה את הרכיב שמוגדר כרכיב המיקוד בדף. למשתמשים שלא יכולים או לא רוצים להשתמש בעכבר, האינדיקטור הזה חשוב מאוד, כי הוא מחליף את מצביע העכבר.
אם סימן המיקוד שמוגדר כברירת מחדל בדפדפן מתנגש עם העיצוב שלכם, אתם יכולים להשתמש ב-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