הפודקאסט The CSS – 018: Focus
בדף האינטרנט שלכם, אתם לוחצים על קישור שמדלג על המשתמש לתוכן הראשי באתר. לרוב, קישורים כאלה מכונים קישורי דילוג או קישורי עוגן. כשהקישור הזה מופעל על ידי מקלדת, באמצעות המקשים Tab ו-Enter, למאגר התוכן הראשי יש טבעת מיקוד סביבו. Why is that?
הסיבה לכך היא של-<main> יש ערך מאפיין tabindex="-1",
ולכן אפשר למקד אותו באופן פרוגרמטי.
כשהטירגוט <main> מטורגט, מאחר שה-#main-content
בשורת כתובת ה-URL של הדפדפן תואם ל-id – הוא מקבל מיקוד פרוגרמטי.
מפתה להסיר את סגנונות המיקוד במצבים כאלה, אבל הטיפול במיקוד בצורה נכונה ובתשומת לב עוזר ליצור חוויית משתמש טובה ונגישה.
זה גם מקום נהדר להוסיף קצת עניין לאינטראקציות.
למה חשוב להתמקד?
כמפתחי אתרים, באחריותכם להפוך את האתר לנגיש וכולל את כולם. במסגרת האחריות הזו, צריך ליצור מצבי מיקוד נגישים באמצעות שירות CSS.
סגנונות מיקוד עוזרים לאנשים שמשתמשים במכשיר, כמו מקלדת או מתג נגישות, לנווט באתר ולבצע בו פעולות. אם רכיב מסוים מקבל מיקוד ואין אינדיקציה ויזואלית לכך, המשתמש עלול לאבד את הפריט שבו הוא נמצא. מצב כזה עלול ליצור בעיות בניווט ולגרום להתנהגות לא רצויה אם המשתמש לוחץ על קישור שגוי.
איך אלמנטים מתמקדים
רכיבים מסוימים ניתנים למיקוד באופן אוטומטי.
אלה רכיבים שמקבלים אינטראקציה וקלט, כמו <a>,
<button>, <input> ו-<select>.
בקיצור, כל רכיבי הטופס, הלחצנים והקישורים.
בדרך כלל אפשר לנווט בין רכיבי האתר שניתנים למיקוד באמצעות מקש Tab כדי להתקדם לדף, ו-Shift + Tab כדי לחזור אחורה.
יש גם מאפיין HTML בשם tabindex שמאפשר לשנות את אינדקס הכרטיסיות (הסדר שבו רכיבים מתמקדים) בכל פעם שמישהו לוחץ על מקש Tab או שהמיקוד מועבר על ידי שינוי גיבוב בכתובת ה-URL או בעקבות אירוע של JavaScript.
אם הרכיב tabindex ברכיב HTML מוגדר ל-0, הוא יכול לקבל מיקוד דרך מקש tab, והוא יכבד את אינדקס הכרטיסיות הגלובלי, שמוגדר לפי סדר המקורות של המסמך.
אם מגדירים את tabindex לערך -1, ניתן להתמקד רק באופן פרוגרמטי. כלומר, רק כשמתרחש אירוע JavaScript או שמתבצע שינוי גיבוב (hash) (המזהה תואם ל-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>באיזה ממכשירי הקלט הבאים אפשר להגדיר מיקוד?