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