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

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

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

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

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

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

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

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

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

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

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

מוסיפים רכיב לסדר הכרטיסיות הטבעיות באמצעות 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 > אפשרויות > נגישות) ומחפשים את התוצאות של הביקורת "לאף רכיב יש ערך [tabindex] גדול מ-0".

שימוש ב-'roving tabindex'

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

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

במקרים כאלה, הרכיב מגדיר את הערך 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>

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

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