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

Rob Dodson

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

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

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

:focus המערכת מחילה פסאודו-class בכל פעם שיש התמקדות ברכיב, ללא קשר לקלט המכשיר (עכבר, מקלדת, סטיילוס וכו') או השיטה ששימשה למיקוד המכשיר. לדוגמה, ב<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 יתאים.

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

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

/*
  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 {
  …
}