tabindex נגישות: מתי משתמשים בו, ולמה לא בערך חיובי

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

tabindex נגישות: 3 הערכים ומה הם עושים

ערך	מה הוא עושה	מתי משתמשים
tabindex="0"	מכניס אלמנט לסדר ה-Tab, לפי מיקומו בקוד	רכיב אינטראקטיבי מותאם שאין לו תגית מקורית, למשל רכיב שבנוי מ-div. ויחד עם תפקיד ARIA והפעלה מהמקלדת
tabindex="-1"	האלמנט לא בסדר ה-Tab, אבל אפשר להעביר אליו פוקוס בקוד	הכותרת של חלון קופץ שנפתח, היעד של קישור "דלג לתוכן", הודעת שגיאה בטופס
tabindex חיובי (1, 2, 3…)	קובע סדר משלו, לפני כל השאר	כמעט אף פעם. הוא שובר את סדר הניווט הטבעי

הטעויות הנפוצות

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

הכלל: קודם HTML, אחר כך tabindex

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

בהדרכות שלנו למפתחים ולמעצבי UI/UX זה אחד הנושאים הראשונים, כי זו טעות שחוזרת בכל פרויקט. לבדיקה ולתיקון באתר קיים, ראו את עמוד הנגשת אתרים.

שאלות נפוצות על tabindex ונגישות