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

לפעמים קשה לדעת אילו התנהגויות מקלדת צריך להטמיע. במדריך Accessible Rich Internet Applications (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 ומפעילים את שיטת המיקוד במשתנה הזה.

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