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

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

לסיכום

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

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

בדיקת ההבנה

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