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

The CSS Podcast – 018: Focus

בדף האינטרנט, לוחצים על קישור שמעביר את המשתמש לתוכן הראשי של האתר. קישורים כאלה מכונים לעיתים קרובות 'קישורי דילוג' או 'קישורי עוגן'. כשמפעילים את הקישור הזה באמצעות מקלדת, באמצעות המקשים Tab ו-Enter, מתקבלת טבעת מיקוד סביב מאגר התוכן הראשי. למה זה קורה?

הסיבה לכך היא של-<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, הוא יוסר מאינדקס הכרטיסיות הגלובלי, שמוגדר לפי סדר המקור של המסמך. סדר הלחצן Tab יוגדר עכשיו לפי הערך של 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, לא תהיה התאמה – לקו המתאר יהיו פינות חדות. לכן, הסגנון הזה לא יוצג במצב הניגודיות הגבוהה של Windows. הסיבה לכך היא שמצב הניגודיות הגבוהה ב-Windows לא מחיל צללים, וברוב המקרים מתעלם מתמונות רקע כדי להעדיף את ההגדרות המועדפות של המשתמש.

לסיכום

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

• הימנעו משימוש ב-outline: none באלמנט שיכול לקבל מיקוד מקלדת.
• מומלץ להימנע מחילוף סגנונות outline בסגנונות box-shadow. כי הם לא מופיעים במצב הניגודיות הגבוהה של Windows.
• יש להגדיר ערך חיובי ל-tabindex ברכיב HTML רק אם חייבים לעשות זאת.
• ודאו שמצב המיקוד ברור מאוד לעומת מצב ברירת המחדל.

בדיקת ההבנה

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