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