מוזיקה לריכוז

הפודקאסט של שירות ה-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 רק אם חייבים לעשות זאת.
• ודאו שמצב המיקוד ברור מאוד לעומת מצב ברירת המחדל.

בדיקת ההבנה

בוחנים את הידע שלכם לגבי התמקדות