ברכיבי HTML רגילים כמו <button> או <input> יש נגישות מובנית במקלדת, ומומלץ להשתמש בהם כשאפשר. עם זאת, אם אתם צריכים ליצור רכיבים אינטראקטיביים מותאמים אישית, תוכלו ליצור את התנהגות המשתמש הצפויה על ידי הוספת tabindex.
יש להוסיף את tabindex רק לתוכן אינטראקטיבי. גם אם התוכן חשוב, כמו תמונת מפתח, משתמשים בקורא מסך יכולים להבין אותו בלי להוסיף מיקוד.
מה זה tabindex?
אם תצטרכו לשנות את סדר הכרטיסיות שמוגדר כברירת מחדל באלמנטים מובנים, תוכלו להשתמש במאפיין ה-HTML tabindex כדי להגדיר במפורש את מיקום הכרטיסייה של הרכיב.
אפשר להחיל את tabindex על כל רכיב, אבל צריך להחיל אותו רק על רכיבים אינטראקטיביים, עם טווח ערכים של מספרים שלמים. באמצעות tabindex אפשר לציין סדר מפורש לרכיבי דף שניתן להתמקד בהם, להוסיף רכיב שלא ניתן להתמקד בו לסדר הטאבים ולהסיר רכיבים מסדר הכרטיסיות. למשל:
tabindex="0": הוספת רכיב לסדר הכרטיסיות הטבעיות. אפשר למקד את האלמנט על ידי הקשה על Tab, ואפשר למקד את האלמנט על ידי קריאה ל-method focus() שלו.
tabindex="-1": הסרת רכיב מסדר הכרטיסיות הטבעיות, אבל עדיין אפשר להתמקד ברכיב באמצעות קריאה ל-method focus() שלו.
tabindex="5": כל מאפיין tabindex שגדול מ-0 מעביר את הרכיב הזה לחזית סדר הכרטיסיות הטבעיות. אם יש מספר רכיבים עם tabindex שגדול מ-0, סדר הכרטיסיות מתחיל מהערך הנמוך ביותר שגדול מאפס וממשיך למעלה. שימוש באינדקס טאבים גדול מ-0 נחשב לאנטי-דפוס.
מוודאים שאפשר לגשת לפקדים באמצעות המקלדת
כלים כמו Lighthouse יכולים לזהות באופן אוטומטי בעיות נגישות מסוימות, אבל עדיין צריך לבצע חלק מהבדיקות באופן ידני.
נסו להקיש על המקש Tab כדי לנווט באתר. האם יש לכם אפשרות להגיע לכל הפקדים האינטראקטיביים בדף? אם לא, יכול להיות שתצטרכו להשתמש ב-tabindex כדי לשפר את המיקוד של אמצעי הבקרה האלה.
ניהול המיקוד ברמת הדף
לפעמים, tabindex עוזר ליצור חוויית משתמש חלקה. לדוגמה, אם אתם יוצרים דף יחיד חזק עם קטעי תוכן שונים, שבהם חלק מהתוכן מוסתר בנקודות שונות של טעינת הדף. כלומר, יכול להיות שקישורי הניווט משנים את התוכן הגלוי, בלי לרענן את הדף.
במקרה כזה, צריך לזהות את אזור התוכן שנבחר ולתת לו tabindex של -1 ולקרוא ל-method focus שלו. כך ניתן לוודא שהתוכן לא מופיע בסדר הכרטיסיות הטבעי. השיטה הזו, שנקראת ניהול המיקוד, שומרת על ההקשר בין ההקשר החזותי של המשתמש לבין התוכן החזותי של האתר.
ניהול המיקוד ברכיבים
במקרים מסוימים, צריך לנהל את המיקוד גם ברמת הבקרה, למשל באמצעות רכיבים מותאמים אישית.
לפעמים קשה לדעת אילו התנהגויות של המקלדת להטמיע. במדריך Accessible Rich Internet Applications (ARIA) יש שיטות לאימות מפורטות סוגי הרכיבים והסוגים של פעולות המקלדת שהם תומכים בהם.
הוספת רכיב לסדר הכרטיסיות
מוסיפים רכיב לסדר הכרטיסיות הטבעיות באמצעות tabindex="0". למשל:
<div tabindex="0">Focus me with the TAB key</div>
כדי להתמקד ברכיב, מקישים על המקש Tab או מפעילים את השיטה focus() של הרכיב.
הסרת רכיב מסדר הכרטיסיות
הסרת רכיב באמצעות tabindex="-1". למשל:
<button tabindex="-1">Can't reach me with the TAB key!</button>
הפעולה הזו מסירה רכיב מסדר הכרטיסיות הטבעיות, אבל עדיין אפשר למקד את הרכיב באמצעות קריאה ל-method focus().
החלה של tabindex="-1" על רכיב לא משפיעה על הצאצאים שלו. אם הם מופיעים בסדר הכרטיסיות באופן טבעי או בגלל ערך tabindex, הם יישארו בסדר הכרטיסיות.
כדי להסיר רכיב ואת כל הצאצאים שלו מסדר הכרטיסיות, כדאי להשתמש בפולי מילוי inert של WICG.
ה-polyfill מדמה את ההתנהגות של מאפיין inert מוצע, וכך מונע בחירה או קריאה של אלמנטים על ידי טכנולוגיות מסייעות.
הימנעות מ-tabindex > 0
כל ערך של tabindex שגדול מ-0 מקפיצה את הרכיב לחלק הקדמי של סדר הכרטיסיות הטבעי. אם יש כמה רכיבים עם tabindex גדול מ-0, סדר הכרטיסיות מתחיל מהערך הנמוך ביותר שגדול מאפס ועובר לסיומו.
שימוש ב-tabindex שגדול מ-0 נחשב לאנטי-דפוס כי קוראי מסך מנווטים בדף לפי סדר DOM, ולא לפי סדר כרטיסיות. אם אתם צריכים שרכיב יופיע מוקדם יותר בסדר הטאבים, צריך להעביר אותו למקום קודם ב-DOM.
באמצעות Lighthouse אפשר לזהות רכיבים עם tabindex > 0. מריצים את בדיקת הנגישות (Lighthouse > אפשרויות > נגישות) ומחפשים את התוצאות של הביקורת "לאף רכיב יש ערך [tabindex] גדול מ-0".
שימוש ב'ניווט ב-tabindex'
אם אתם בונים רכיב מורכב, יכול להיות שתצטרכו להוסיף עוד תמיכה במקלדת מעבר למיקוד. כשאפשר, כדאי להשתמש ברכיב select המובנה. ניתן להתמקד בו ומאפשר למקשי החצים להציג אפשרויות נוספות שניתן לבחור.
כדי ליישם פונקציות דומות ברכיבים שלכם, תוכלו להשתמש בשיטה שנקראת "העברה של tabindex". ניתוב מחדש של Tabindex עובד על ידי הגדרת tabindex לערך 1- עבור כל הילדים למעט המכשיר הפעיל הנוכחי. לאחר מכן הרכיב משתמש במאזינים לאירועים במקלדת כדי לקבוע על איזה מקש המשתמש לחץ.
במקרים כאלה, הרכיב מגדיר את הערך 1-tabindex של הילד או הילדה שהמיקוד שלהם היה -1, מגדיר את tabindex של הילד או הילדה שמתמקדים בהם ל-0 וקורא ל-method focus() שעליה.
לפני
<div role="toolbar">
<button tabindex="-1">Undo</button>
<button tabindex="0">Redo</button>
<button tabindex="-1">Cut</button>
</div>
אחרי
<div role="toolbar">
<button tabindex="-1">Undo</button>
<button tabindex="-1">Redo</button>
<button tabindex="0">Cut</button>
</div>
מתכונים לגישה למקלדת
אם אתם לא בטוחים איזו רמת תמיכה במקלדת צריכה להיות ברכיבים המותאמים אישית, תוכלו לעיין בגרסה 1.1 של שיטות העריכה של ARIA. במדריך הזה מפורטות תבניות נפוצות של ממשק משתמש ומזהה באילו מפתחות הרכיבים צריכים לתמוך.