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