סדר הכרטיסיות שמוגדר כברירת מחדל לפי מיקום ה-DOM של רכיבי HTML סמנטיים הוא
אבל לפעמים צריך לשנות את סדר הכרטיסיות. מעבר
הם אידיאליים ב-HTML, אך עשויים להיות לא מעשיים. במקרים כאלה,
יכול להשתמש במאפיין ה-HTML tabindex כדי להגדיר באופן מפורש את הכרטיסייה של הרכיב
המיקום.
אפשר להחיל את tabindex על כל רכיב, אבל זה לא בהכרח
היא שימושית לכל אחד מהיסודות, והיא מקבלת טווח של ערכים של מספרים שלמים. ב-
tabindex, ניתן להגדיר סדר מפורש לרכיבי דף שניתן להתמקד בהם,
מוסיפים לסדר הכרטיסיות רכיב שאינו ניתן למיקוד, ומסירים רכיבים.
מסדר הכרטיסיות. לדוגמה:
tabindex="0": הוספת רכיב לסדר הכרטיסיות הטבעיות. הרכיב יכול
ניתן להתמקד באמצעות הקשה על Tab, ואפשר להתמקד ברכיב באמצעות קריאה
ל-method focus().
tabindex="-1": הסרת רכיב מהסדר של הכרטיסיות הטבעיות, אבל הרכיב
עדיין יהיה זמין למיקוד על ידי קריאה ל-method focus().
tabindex="5": כל אינדקס כרטיסיות שגדול מ-0 יעביר את הרכיב הזה לחזית
בסדר הכרטיסיות הטבעיות. אם יש מספר רכיבים שהאינדקס שלהם גדול יותר
מהערך 0, סדר הכרטיסיות מתחיל מהערך הנמוך ביותר שגדול מאפס
ומתקדמים כל הדרך.
הדבר נכון במיוחד לגבי רכיבים שאינם קלט, כמו כותרות, תמונות או מאמר.
כותרות. כשהדבר אפשרי, מומלץ לארגן את קוד המקור כך שרצף ה-DOM יספק
בסדר הגיוני של הכרטיסיות. אם בכל זאת משתמשים ב-tabindex, צריך להגביל אותו לאינטראקטיביים בהתאמה אישית
אמצעי בקרה כמו לחצנים, כרטיסיות, תפריטים נפתחים ושדות טקסט; כלומר, רכיבים
שהמשתמש יצפה לקבל ממנו קלט.
יש להוסיף את tabindex רק לתוכן אינטראקטיבי. גם אם התוכן חשוב, כמו תמונת מפתח, משתמשים בקורא מסך יכולים להבין אותו
הוספת מיקוד.
ניהול המיקוד ברמת הדף
לפעמים, tabindex נדרש כדי שחוויית המשתמש תהיה חלקה. לדוגמה,
אם אתם יוצרים דף יחיד מבוסס עם קטעי תוכן שונים,
כל התוכן גלוי בו-זמנית. יכול להיות שמדובר בקישורי ניווט
לשנות את התוכן הגלוי, בלי לרענן את הדף.
במקרה הזה, יש לזהות את אזור התוכן שנבחר ולתת לו tabindex של
-1 וקוראים ל-method 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 guide. החלק השני מכיל רשימה של דפוסי עיצוב, טבלת מאפיינים לרדיו groups, הרכיב הקיים שהכי מתאים לרכיב החדש.
אחת מהתנהגויות המקלדת הנפוצות הוא נתמך על ידי מקשי החיצים למעלה/למטה/שמאלה/ימינה. כדי להוסיף את ההתנהגות הזו לממשק החדש אנחנו משתמשים בשיטה שנקראת העברת טאבים לאינדקס.
העברת 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>
הרכיב משתמש ב-event listener לאירועים במקלדת כדי לקבוע איזה מקש
לחיצות משתמש; במצב כזה, היא מגדירה
tabindex לערך 1-, מגדירה את הערך tabindex של הילד או הילדה כדי להיות ממוקדים יותר, וקוראת לפונקציה
להתמקד בו.
<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>
כשהמשתמש מגיע לפני האחרון (או הראשון, בהתאם לכיוון שאליו הוא הגיע) מזיז את הילד או הילדה, המיקוד חוזר לסירוגין בתור הראשון (או האחרון) לילדים.
אפשר לנסות את הדוגמה הבאה. נבדוק את הרכיב כלי פיתוח, כדי לצפות באינדקס הכרטיסיות שעובר בין רדיו.
מודאליים ומלכודות מקלדת
עדיף להימנע מניהול ידני של הפוקוס, כי זה עלול להוביל למצבים מורכבים. לדוגמה: ווידג'ט של השלמה אוטומטית שמנסה לנהל את המיקוד ולצלם את התנהגות הכרטיסייה, אך מונעת מהמשתמש לצאת עד לסיום הפעולה. מצב כזה נקרא מלכודת מקלדת, והוא יכול לגרום לתסכול בקרב המשתמשים.
סעיף 2.1.2 של WCAG קובע שאין לנעול את מיקוד המקלדת אף פעם או כלכודים ברכיב דף מסוים. המשתמש יכול לנווט אל כל רכיבי הדף וממנו רק באמצעות במקלדת.
היוצא מן הכלל לכלל הזה הוא מודלים. עם זאת, עדיין צריך להימנע משימוש
tabindex כשיוצרים מודל עזר. בעזרת inert, אפשר
להבטיח שהמשתמשים לא יוכלו לקיים אינטראקציה בטעות עם אלמנט (פעולה מכוונת
מלכודת מקלדת). שימוש ב<dialog>
קבוע כברירת מחדל, כדי ליצור מודל למשתמשים בזמן החסימה
קליקים וכרטיסיות מחוץ לחלון העזר. כך המשתמש יכול להתמקד
נדרשת בחירה.