דף זה תורגם על ידי Cloud Translation API.

שימוש באינדקס

Dave Gash

Meggin Kearney

Rob Dodson

Alexandra Klepper

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

Browser Support

Source

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<radio-group>
    <radio-button>Water</radio-button>
    <radio-button>Coffee</radio-button>
    <radio-button>Tea</radio-button>
    <radio-button>Cola</radio-button>
    <radio-button>Ginger Ale</radio-button>
</radio-group>

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

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

כדי להשתמש ב-tabindex נע, מגדירים את הערך של tabindex ל--1 לכל הצאצאים, מלבד הצאצא הפעיל.

<radio-group>
  <radio-button tabindex="0">Water</radio-button>
  <radio-button tabindex="-1">Coffee</radio-button>
  <radio-button tabindex="-1">Tea</radio-button>
  <radio-button tabindex="-1">Cola</radio-button>
  <radio-button tabindex="-1">Ginger Ale</radio-button>
</radio-group>

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

<radio-group>
    <!-- Assuming the user pressed the down arrow, we'll focus the next available child -->
    <radio-button tabindex="-1">Water</radio-button>
    <radio-button tabindex="0">Coffee</radio-button> // call .focus() on this element
    <radio-button tabindex="-1">Tea</radio-button>
    <radio-button tabindex="-1">Cola</radio-button>
    <radio-button tabindex="-1">Ginger Ale</radio-button>
</radio-group>

כשהמשתמש מגיע לצאצא האחרון (או הראשון, בהתאם לכיוון שבו הוא מעביר את המיקוד), המיקוד חוזר חזרה לצאצא הראשון (או האחרון).

נסו את הדוגמה הבאה. בודקים את הרכיב ב-DevTools כדי לראות את tabindex עובר מכפתור בחירה אחד לכפתור הבא.

חלונות מודולריים ומלכודות מקלדת

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

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

החריג לכלל הזה הוא חלונות קופצים. עם זאת, עדיין מומלץ להימנע משימוש ב-tabindex כשיוצרים חלון דו-שיח. בעזרת inert תוכלו לוודא שהמשתמשים לא יוכלו לבצע אינטראקציה עם אלמנט בטעות (מלכודת מכוונת למקלדת). אפשר להשתמש ברכיב <dialog>, שהוא לא פעיל כברירת מחדל, כדי ליצור חלון דו-שיח למשתמשים תוך חסימת קליקים וכרטיסיות מחוץ לחלון הדו-שיח. כך המשתמש יכול להתמקד בבחירה הנדרשת.