משתמשים רבים מסתמכים על המקלדת כדי לנווט באפליקציות, החל ממשתמשים עם לקויות מוטוריות זמניות וקבועות ועד למשתמשים שמשתמשים במקשי קיצור כדי להיות יעילים ופרודוקטיביים יותר. סדר טאבים לוגי הוא חלק חשוב בחוויית ניווט חלקה במקלדת.
איך בודקים באופן ידני
כדי לבדוק אם סדר הכרטיסיות של האפליקציה הוא לוגי, אפשר לנסות להקיש על Tab כדי לעבור בין הכרטיסיות בדף. סדר ההתמקדות ברכיבים צריך להיות תואם לסדר ה-DOM. באופן כללי, המיקוד צריך לנוע לפי סדר הקריאה, מימין לשמאל, מלמעלה למטה בדף.
מידע נוסף זמין במאמר עקרונות בסיסיים של גישה למקלדת.
יש לך אפשרות לגשת לכל הלחצנים האינטראקטיביים בדף?
אם לא, יכול להיות שתצטרכו להשתמש ב-tabindex כדי לשפר את היכולת להתמקד בפקדים האלה.
ככלל, כל פקד שמשתמש יכול לבצע איתו פעולה או לספק לו קלט צריך להיות ניתן להתמקד בו ולהציג אינדיקטור של מיקוד.
אם משתמש במקלדת לא יכול לראות את האזור שבו מופיע המיקוד, אין לו אפשרות לבצע אינטראקציה עם הדף.
איך לתקן
אם סדר המיקוד נראה שגוי, צריך לסדר מחדש את הרכיבים ב-DOM כדי שהסדר של הקלידים Tab יהיה טבעי יותר.
אם אתם לא מצליחים לגשת לכל אמצעי הבקרה האינטראקטיביים בדף, התיקון הראשון שכדאי לנסות הוא להחליף את אמצעי הבקרה המותאמים אישית בחלופות סטנדרטיות של HTML.
לדוגמה, מחליפים את <div> שמתפקד כלחצן ב-<button>.
שימוש ברכיבי HTML מובנים יכול לשפר משמעותית את הנגישות של האתר, ולצמצם באופן משמעותי את עומס העבודה.
אם אתם יוצרים רכיבים אינטראקטיביים מותאמים אישית ללא מקבילה סטנדרטית ב-HTML, תוכלו להשתמש במאפיין tabindex כדי לוודא שהם נגישים למקלדת.
לדוגמה:
<div tabindex="0">Focus me with the TAB key</div>
מידע נוסף זמין במאמר שליטה בפוקוס באמצעות tabindex.