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

Dave Gash

Meggin Kearney

Rob Dodson

Alexandra Klepper

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

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

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

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

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

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

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

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

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

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

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

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

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

לפעמים קשה לדעת אילו התנהגויות של המקלדת כדאי להטמיע. במדריך Accessible Rich Internet Applications (ARIA) Authoring Practices מפורטים סוגי הרכיבים וסוגי פעולות המקלדת שהם תומכים בהם.

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

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

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

התכונה 'הזזת מיקום ב-Tab' פועלת על ידי הגדרת הערך 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>

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

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

חלונות קופצים ומלכוד מקלדת

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

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

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