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

Rob Dodson

Alexandra Klepper

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

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

מהו tabindex?

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

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

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

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

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

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

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

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

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

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

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

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

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

לפעמים קשה לדעת אילו התנהגויות מקלדת צריך להטמיע. במדריך שיטות ליצירת אפליקציות אינטרנט מתקדמות ונגישות (ARIA) מפורטים סוגי הרכיבים ואילו פעולות מקלדת הם תומכים בהן.

הוספת רכיב לסדר הקלדת Tab

הוספת רכיב לסדר הכרטיסיות הטבעי באמצעות 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>

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

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

הימנעו מ-tabindex > 0

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

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

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

שימוש ב-'roving 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 1.1. במדריך הזה מפורטים דפוסים נפוצים של ממשק משתמש, ומזהים את המפתחות שהרכיבים צריכים לתמוך בהם.