הפודקאסט של שירות ה-CSS – 018: פוקוס
בדף האינטרנט שלכם, אתה לוחץ על קישור שמדלג את המשתמש אל התוכן הראשי של האתר. לרוב, קישורים כאלה מכונים קישורי דילוג או קישורי עוגן. כשהקישור מופעל על ידי מקלדת, באמצעות מקשי Tab ו-Enter, למכל התוכן הראשי יש טבעת מיקוד סביבו. למה זה קורה?
הסיבה לכך היא של-<main>
יש ערך המאפיין tabindex="-1"
,
כלומר, ניתן להתמקד בו באופן פרוגרמטי.
כאשר <main>
מטורגט — כי #main-content
בסרגל של כתובת ה-URL של הדפדפן תואמת ל-id
— הוא מקבל מיקוד פרוגרמטי.
מפתה להסיר את סגנונות ההתמקדות במצבים כאלה.
אבל התמקדות נכונה ובתשומת לב עוזרת ליצור
לחוויית משתמש נגישה.
זה גם יכול להיות מקום מצוין להוסיף קצת עניין לאינטראקציות.
למה ההתמקדות חשובה?
כמפתח/ת אתרים, התפקיד שלכם הוא להפוך את האתר לנגיש ומקיף לכולם. חלק מהאחריות הזו היא יצירת מצבי מיקוד נגישים באמצעות שירות CSS.
סגנונות ריכוז עוזרים לאנשים שמשתמשים במכשיר כמו מקלדת או מתג כדי לנווט באתר ולנהל איתו אינטראקציה. אם אלמנט מסוים מקבל מיקוד ואין אינדיקציה ויזואלית, משתמש עלול לאבד את תשומת הלב של הצופים. הפעולות האלה עלולות ליצור בעיות בניווט ולגרום להתנהגות לא רצויה אם, נניח, מופעל הקישור הלא נכון.
איך אלמנטים מודגשים
יש רכיבים שניתן להתמקד בהם באופן אוטומטי.
אלה רכיבים שמקבלים אינטראקציות וקלט, כמו <a>
,
<button>
, <input>
וגם <select>
.
בקיצור, כל רכיבי הטופס, הלחצנים והקישורים.
בדרך כלל אפשר לנווט ברכיבים של אתר שאפשר להתמקד בהם באמצעות מקש Tab כדי לעבור קדימה בדף, ו-Shift + Tab כדי לחזור אחורה.
יש גם מאפיין HTML בשם tabindex
שמאפשר לשנות את האינדקס של הכרטיסיות, שהוא
הסדר שבו מתמקדים ברכיבים – בכל פעם שמישהו לוחץ על מקש Tab,
או המיקוד משתנה על ידי שינוי גיבוב (hash) בכתובת ה-URL או בעקבות אירוע של JavaScript.
אם הערך של tabindex
ברכיב HTML הוא 0
,
הוא יכול לקבל מיקוד דרך מקש Tab והוא יכבד את אינדקס הכרטיסיות הגלובלי,
המוגדר לפי סדר המקור של המסמך.
אם מגדירים את tabindex
לערך -1
, המיקוד יכול להתבצע רק באופן פרוגרמטי,
כלומר רק כשמתרחש אירוע JavaScript
או שינוי גיבוב (שתואם ל-id
של הרכיב בכתובת ה-URL).
אם מגדירים את הערך של tabindex
לערך גבוה מ-0
,
היא תוסר מהאינדקס של הכרטיסיות הגלובליות,
מוגדר לפי סדר המקורות של המסמך.
סדר הכרטיסיות יוגדר עכשיו לפי הערך של tabindex
.
כך שרכיב עם tabindex="1"
יקבל מיקוד לפני רכיב עם tabindex="2"
, לדוגמה.
מיקוד בעיצוב
כשמתמקדים ברכיב מסוים, התנהגות הדפדפן שמוגדרת כברירת מחדל היא להציג טבעת התמקדות. טבעת המיקוד הזו משתנה בין הדפדפן ומערכות ההפעלה.
אפשר לשנות את ההתנהגות הזו באמצעות CSS,
באמצעות :focus
, :focus-within
ו-:focus-visible
פסאודו-כיתות שלמדתם עליהם
שיעור פסאודו-כיתות.
חשוב להגדיר סגנון התמקדות שניגודיות לסגנון ברירת המחדל של אלמנט כלשהו.
לדוגמה, גישה מקובלת היא להשתמש בנכס outline
.
a:focus {
outline: 2px solid slateblue;
}
יכול להיות שהמאפיין outline
ייראה קרוב מדי לטקסט של קישור,
אבל המאפיין outline-offset
יכול לעזור בעניין הזה,
כי היא מוסיפה padding
חזותי נוסף בלי להשפיע על הגודל הגאומטרי שהרכיב ממלא.
ערך מספר חיובי של outline-offset
ידחוף את המתאר החוצה,
ערך שלילי ימשוך את המתאר פנימה.
כרגע בחלק מהדפדפנים,
אם הגדרתם border-radius
ברכיב ואתם משתמשים ב-outline
,
הוא לא יתאים — לקווי המתאר יהיו פינות חדות.
לכן,
יש מפתה להשתמש ב-box-shadow
עם רדיוס טשטוש קטן, מפני ש-box-shadow
נצמד לצורה,
לכבוד border-radius
,
אבל הסגנון הזה לא יוצג במצב ניגודיות גבוהה של Windows.
הסיבה היא שמצב ניגודיות גבוהה של Windows לא מחיל צלליות,
ומתעלם בעיקר מתמונות רקע כדי לתת עדיפות להגדרות המועדפות למשתמש.
לסיכום
חשוב מאוד ליצור מצב התמקדות בניגודיות עם מצב ברירת המחדל של אלמנט. סגנונות ברירת המחדל של הדפדפן כבר עושים זאת בשבילך, אבל אם ברצונך לשנות את ההתנהגות הזו, כדאי לזכור את הדברים הבאים:
- אין להשתמש ברכיב
outline: none
באלמנט שיכול לקבל מיקוד במקלדת. - אין להחליף
outline
סגנונות ב-box-shadow
. כי הם לא מופיעים במצב ניגודיות גבוהה של Windows. - יש להגדיר ערך חיובי ל-
tabindex
ברכיב HTML רק אם חייבים לעשות זאת. - ודאו שמצב המיקוד ברור מאוד לעומת מצב ברירת המחדל.
בדיקת ההבנה
בוחנים את הידע שלכם לגבי התמקדות
אילו מהרכיבים הבאים הם רכיבים שניתנים למיקוד באופן אוטומטי?
<a>
<p>
<button>
<input>
<output>
<select>
באיזה ממכשירי הקלט הבאים אפשר להגדיר מיקוד?