התמקדות בסגנון

Rob Dodson

אינדיקטור המיקוד (שבדרך כלל מסומן באמצעות 'טבעת התמקדות') מזהה את הרכיב בדף שלכם שמתמקד כרגע. המדד הזה חשוב מאוד למשתמשים שלא יכולים להשתמש בעכבר, כי הוא משמש כמצביע על העכבר.

אם אינדיקטור המיקוד המוגדר כברירת מחדל של הדפדפן מתנגש עם העיצוב שלכם, תוכלו להשתמש ב-CSS כדי לעצב אותו מחדש. חשוב לזכור:

שימוש ב:focus כדי להציג תמיד אינדיקטור של מיקוד

המחלקה המדומה :focus מיושמת בכל פעם שרכיב כלשהו ממוקד, בלי קשר למכשיר הקלט (עכבר, מקלדת, סטיילוס וכו') או לשיטה שמשמשת למיקוד. לדוגמה, ב-<div> שלמטה יש tabindex שמאפשר להתמקד. יש לו גם סגנון מותאם אישית למצב :focus:

div[tabindex="0"]:focus {
  outline: 4px dashed orange;
}

לא משנה אם משתמשים בעכבר כדי ללחוץ עליו או על מקשי קיצור במקלדת, <div> ייראה תמיד אותו הדבר.

לצערנו, דפדפנים לא תואמים לאופן שבו הם מחילים את המיקוד. המיקוד תלוי בדפדפן ובמערכת ההפעלה.

לדוגמה, ל-<button> שלמטה יש גם סגנון מותאם אישית למצב :focus.

button:focus {
  outline: 4px dashed orange;
}

אם לוחצים על <button> עם עכבר ב-Chrome ב-macOS, תוכלו לראות את סגנון המיקוד המותאם אישית שלו. עם זאת, הסגנון של המיקוד המותאם אישית לא יופיע אם תלחצו על <button> ב-Safari ב-macOS. הסיבה לכך היא שב-Safari הרכיב לא מקבל מיקוד כשלוחצים עליו.

מכיוון שהתנהגות המיקוד לא עקבית, יכול להיות שיהיה צורך לבדוק קצת במכשירים שונים כדי לוודא שסגנונות המיקוד שלכם מתאימים למשתמשים.

שימוש ב:focus-visible כדי להציג באופן סלקטיבי אינדיקטור להתמקדות

המחלקה החדשה של :focus-visible מיושמת בכל פעם שרכיב מסוים מקבל מיקוד, והדפדפן קובע באמצעות היוריסטיקה שהצגת אינדיקטור של מיקוד תועיל למשתמש. באופן ספציפי, אם האינטראקציה האחרונה של המשתמש הייתה באמצעות המקלדת והלחיצה על המקשים לא כללה מטא, מקש ALT / OPTION או CONTROL, הערך :focus-visible יתאים.

הלחצן בדוגמה הבאה יציג אינדיקטור של המיקוד באופן סלקטיבי. אם משתמשים בעכבר כדי ללחוץ על העכבר, התוצאות שונות מאשר בפעם הראשונה שמשתמשים במקלדת כדי ללחוץ על העכבר.

button:focus-visible {
  outline: 4px dashed orange;
}

שימוש ב-:focus-within כדי לעצב את תבנית ההורה של אלמנט שמתמקדים בו

המחלקה המדומה :focus-within מיושמת על רכיב כשהאלמנט עצמו מקבל מיקוד או כשרכיב אחר בתוך הרכיב הזה מקבל מיקוד.

אפשר להשתמש בתמונה כדי להדגיש אזור בדף כדי למשוך את תשומת הלב של המשתמש לאזור הזה. לדוגמה, הטופס שבהמשך מקבל מיקוד גם כשהטופס עצמו נבחר וגם כאשר אחד מלחצני הבחירה שלו נבחר.

form:focus-within {
  background: #ffecb3;
}

מתי להציג אינדיקטור של מיקוד

כלל אצבע טוב הוא לשאול את עצמכם: "אם לחצתם על הפקד בזמן השימוש במכשיר נייד, הייתם מצפים שהוא יציג מקלדת?"

אם התשובה היא 'כן', סביר להניח שאמצעי הבקרה תמיד יציג אינדיקטור למיקוד, ללא קשר למכשיר לקליטת נתונים שמשמש למיקוד. דוגמה טובה היא האלמנט <input type="text">. המשתמש יצטרך לשלוח קלט לרכיב דרך המקלדת, ללא קשר לאופן שבו רכיב הקלט קיבל במקור את המיקוד, ולכן כדאי להציג תמיד אינדיקטור של מיקוד.

אם התשובה היא 'לא', יכול להיות שהפקד יבחר להציג באופן סלקטיבי אינדיקטור למיקוד. דוגמה טובה לכך היא האלמנט <button>. אם משתמשים לוחצים על העכבר עם עכבר או מסך מגע, הפעולה הושלמה ויכול להיות שאין צורך באינדיקטור מיקוד. עם זאת, במקרה שהמשתמש מנווט באמצעות מקלדת, כדאי להציג אינדיקטור של מיקוד כדי שהוא יוכל להחליט אם הוא רוצה ללחוץ על הפקד באמצעות המקשים ENTER או SPACE.

הימנעות מ-outline: none

האופן שבו דפדפנים מחליטים מתי לצייר מחוון מיקוד היא, למען האמת, מאוד מבלבלת. שינוי המראה של רכיב <button> עם CSS או הוספת tabindex לרכיב יגרמו להתנהגות ברירת המחדל של צלצול המיקוד של הדפדפן להתערב.

קו נגדי נפוץ מאוד הוא להסיר את אינדיקטור המיקוד באמצעות CSS. למשל:

/* Don't do this!!! */
:focus {
  outline: none;
}

דרך טובה יותר לעקוף את הבעיה הזו היא להשתמש בשילוב של :focus וה-Polyfill של :focus-visible. קטע הקוד הראשון שלמטה מדגים איך פועל ה-polyfill, והאפליקציה לדוגמה שמתחתיו מספקת דוגמה לשימוש ב-polyfill כדי לשנות את אינדיקטור המיקוד בלחצן.

/*
  This will hide the focus indicator if the element receives focus via the
  mouse, but it will still show 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 {
  …
}