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

רוב דודסון

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

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

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

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

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

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

הימנעות מ-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>

TODO: DevSite - הערכה של חשיבה ובדיקה

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

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