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

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

Dave Gash

Meggin Kearney

Rob Dodson

Alexandra Klepper

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

תמיכה בדפדפנים

מקור

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

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