שליטה בהתמקדות באמצעות Tabindex

Rob Dodson

לרכיבי HTML רגילים כמו <button> או <input> יש נגישות במקלדת מובנית בחינם. עם זאת, אם אתם בונים רכיבים אינטראקטיביים מותאמים אישית, השתמשו במאפיין tabindex כדי להבטיח שהם יהיו נגישים למקלדת.

הערה: כשאפשר, השתמשו ברכיב HTML מובנה במקום ליצור גרסה מותאמת אישית משלכם. לדוגמה, קל מאוד לעצב את <button> וכבר יש בו תמיכה מלאה במקלדת. כך לא תצטרכו לנהל tabindex או להוסיף סמנטיקה עם ARIA.

איך לבדוק אם הפקדים נגישים באמצעות המקלדת

כלי כמו Lighthouse עוזר לזהות בעיות נגישות מסוימות, אבל יש דברים שרק בני אדם יכולים לבדוק.

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

אזהרה: אם לא מוצג אינדיקטור למיקוד בכלל, יכול להיות שהוא מוסתר על ידי שירות ה-CSS. כדאי לבדוק אם יש סגנונות שבהם מוזכר :focus { outline: none; }. תוכלו ללמוד איך לתקן את הבעיה הזו במדריך שלנו בנושא התמקדות בעיצוב.

הוספת רכיב לסדר הכרטיסיות

הוספת רכיב לסדר הכרטיסיות הטבעי באמצעות tabindex="0". למשל:

<div tabindex="0">Focus me with the TAB key</div>

כדי להתמקד ברכיב, מקישים על המקש Tab או קוראים ל-method focus() של הרכיב.

הסרת רכיב מסדר הכרטיסיות

הסרת רכיב באמצעות tabindex="-1". למשל:

<button tabindex="-1">Can't reach me with the TAB key!</button>

הפעולה הזו מסירה רכיב מהסדר של הכרטיסיות הטבעיות, אבל עדיין אפשר להתמקד ברכיב על ידי קריאה ל-method focus().

שימו לב שהחלת tabindex="-1" על רכיב מסוים לא משפיעה על הצאצאים שלו. אם הם נמצאים בסדר הכרטיסיות באופן טבעי או בגלל ערך של tabindex, הם יישארו בסדר הטאבים. כדי להסיר רכיב ואת כל הצאצאים שלו מסדר הכרטיסיות, כדאי להשתמש ב-Polyfill של inert של WICG. ה-polyfill הוא אמולציה של ההתנהגות של מאפיין inert מוצע, ולכן אי אפשר לבחור אלמנטים או לקרוא אותם על ידי טכנולוגיות מסייעות.

זהירות: ה-Polyfill של inert הוא ניסיוני, ויכול להיות שהוא לא יפעל כצפוי בכל המקרים. יש לבדוק היטב לפני השימוש בסביבת הייצור.

הימנעות מ-tabindex > 0

כל tabindex גדול מ-0 מעביר את הרכיב לתחילת הסדר של הכרטיסיות הטבעיות. במקרה שיש מספר רכיבים שהערך tabindex שלהם גדול מ-0, סדר הכרטיסיות מתחיל מהערך הנמוך ביותר שגדול מאפס וממשיך כלפי מעלה.

שימוש בערך tabindex גדול מ-0 נחשב לדפוס נגד, כי קוראי מסך מנווטים בדף לפי סדר DOM ולא לפי סדר כרטיסיות. אם אתם צריכים שרכיב יגיע מוקדם יותר בסדר הכרטיסיות, הוא צריך להעביר אותו למקום מוקדם יותר ב-DOM.

בעזרת Lighthouse אפשר לזהות בקלות אלמנטים כאשר tabindex > 0. מפעילים את בדיקת הנגישות (Lighthouse > אפשרויות > נגישות) ומחפשים את התוצאות של הביקורת 'אין רכיב עם ערך [tabindex] גדול מ-0'.

יצירת רכיבים נגישים באמצעות 'ניווט tabindex'

אם אתם בונים רכיב מורכב, יכול להיות שתצטרכו להוסיף תמיכה במקלדת מעבר לפוקוס. כדאי להשתמש ברכיב select המובנה. תוכלו להתמקד בו, ותוכלו להשתמש במקשי החיצים כדי לחשוף פונקציונליות נוספת (האפשרויות שניתנות לבחירה).

כדי להטמיע פונקציונליות דומה ברכיבים שלכם, תוכלו להשתמש בשיטה שנקראת "נדידה tabindex". הדילוג על Tabindex פועל על ידי הגדרת tabindex ל-1- לכל הילדים, פרט לזה שפעיל כרגע. לאחר מכן הרכיב משתמש בהאזנה לאירועי מקלדת כדי לקבוע על איזה מקש המשתמש לחץ.

כשזה קורה, הרכיב מגדיר את השדה tabindex של הילד או הילדה שמתמקדים קודם ב-1-, מגדיר את tabindex של הילד או הילדה שמתמקדים יותר כ-0 וקורא ל-method focus() לגביו.

לפני

<div role="toolbar">
  <button tabindex="-1">Undo</button>
  <button tabindex="0">Redo</button>
  <button tabindex="-1">Cut</button>
</div>

אחרי

<div role="toolbar">
  <button tabindex="-1">Undo</button>
  <button tabindex="-1">Redo</button>
  <button tabindex="0">Cut</button>
</div>

הערה: רוצים לדעת למה המאפיינים האלה של role="" מיועדים? הם מאפשרים לשנות את הסמנטיקה של רכיב כדי שקורא המסך יקריא אותו בצורה נכונה. אפשר לקרוא מידע נוסף על השימוש בהם במדריך שלנו שבמאמר מידע בסיסי על קוראי מסך.

מתכונים לגישה למקלדת

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