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

Rob Dodson

Alexandra Klepper

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

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

מהו tabindex?

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

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

‫tabindex="0": מוסיף רכיב לסדר הטבעי של המעבר בין כרטיסיות. אפשר להתמקד באלמנט בלחיצה על Tab, ואפשר להתמקד באלמנט באמצעות קריאה לשיטה focus() שלו.

‫tabindex="-1": מסיר רכיב מסדר הכרטיסיות הטבעי, אבל עדיין אפשר להתמקד ברכיב על ידי קריאה לשיטת focus() שלו

‫tabindex="5": כל ערך של tabindex שגדול מ-0 מעביר את הרכיב הזה לחלק הקדמי של סדר הניווט הטבעי באמצעות מקש Tab. אם יש כמה רכיבים עם ערך tabindex גדול מ-0, סדר המעבר באמצעות Tab מתחיל מהערך הנמוך ביותר שגדול מאפס ומתקדם כלפי מעלה. שימוש בערך tabindex גדול מ-0 נחשב לדפוס אנטי.

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

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

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

ניהול המיקוד ברמת הדף

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

במקרה כזה, צריך לזהות את אזור התוכן שנבחר, לתת לו tabindex של -1 ולקרוא לשיטת focus שלו. כך מוודאים שהתוכן לא יופיע בסדר הכרטיסיות הטבעי. הטכניקה הזו נקראת ניהול המיקוד, והיא מאפשרת לשמור על סנכרון בין ההקשר שנתפס על ידי המשתמש לבין התוכן החזותי של האתר.

ניהול המיקוד ברכיבים

במקרים מסוימים, צריך גם לנהל את המיקוד ברמת הפקד, למשל באמצעות Custom Elements.

לפעמים קשה לדעת אילו התנהגויות של המקלדת כדאי להטמיע. במדריך Accessible Rich Internet Applications (ARIA) Authoring Practices מפורטים סוגי הרכיבים וסוגי פעולות המקלדת שהם תומכים בהם.

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

כדי להוסיף רכיב לסדר הכרטיסיות הטבעי, משתמשים ב-tabindex="0". לדוגמה:

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

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

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

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

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

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

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

יש להימנע מ-tabindex > 0

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

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

בעזרת Lighthouse, אפשר לזהות רכיבים עם tabindex > 0. מריצים את הביקורת על נגישות (Lighthouse > Options > Accessibility) ומחפשים את התוצאות של הביקורת 'No element has a [tabindex] value greater than 0'.

שימוש ב-tabindex

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

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

במקרה כזה, הרכיב מגדיר את הערך של tabindex של רכיב הצאצא שהיה בפוקוס קודם ל-‎-1, מגדיר את הערך של tabindex של רכיב הצאצא שיועבר אליו הפוקוס ל-0, וקורא לשיטה 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>

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

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