מידע בסיסי על גישה למקלדת

Rob Dodson

משתמשים רבים מסתמכים על המקלדת כדי לנווט באפליקציות – החל ממשתמשים עם לקויות מוטוריות זמניות וקבועות ועד למשתמשים שמשתמשים בקיצורי דרך במקלדת כדי להיות יעילים ופרודוקטיביים יותר. אסטרטגיה טובה לניווט במקלדת באפליקציה תשפר את חוויית השימוש לכולם.

המיקוד וסדר הכרטיסיות

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

כדי להעביר את המיקוד בדף, משתמשים במקש TAB כדי לנווט 'קדימה' ובמקש SHIFT + TAB כדי לנווט 'לאחור'. הרכיב שבו מופעל המיקוד מסומן בדרך כלל בטבעת מיקוד, וסגנון הטבעת משתנה בין דפדפנים שונים. הסדר שבו המיקוד עובר קדימה ואחורה בין רכיבים אינטראקטיביים נקרא סדר Tab.

רכיבי HTML אינטראקטיביים כמו שדות טקסט, לחצנים ורשימות בחירה הם ניתנים להתמקד באופן משתמע: הם מוכנסים באופן אוטומטי לסדר הכרטיסיות על סמך המיקום שלהם ב-DOM. לרכיבים האינטראקטיביים האלה יש גם טיפול מובנה באירועי מקלדת. אי אפשר להתמקד ברכיבים כמו פסקאות ו-div, כי בדרך כלל המשתמשים לא צריכים לתקשר איתם.

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

1. סידור הרכיבים ב-DOM בסדר לוגי
2. הגדרה נכונה של החשיפה של תוכן מחוץ למסך שלא צריך להתמקד בו

סידור הרכיבים ב-DOM בסדר לוגי

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

אם סדר המיקוד נראה שגוי, צריך לסדר מחדש את הרכיבים ב-DOM כדי שהמיקוד בטאב יהיה טבעי יותר. אם רוצים שרכיב מסוים יופיע מוקדם יותר במסך, צריך להעביר אותו מוקדם יותר ב-DOM.

אפשר לנסות להקיש על Tab בין שתי הקבוצות של הלחצנים שבהמשך כדי לראות את ההבדל בין סדר טאבים לוגי לסדר טאבים לא לוגי:

סדר הכרטיסיות הלוגי

סדר טאבים לא הגיוני

בהמשך מופיעה השוואה בין הקוד של שתי הדוגמאות האלה:

סדר הכרטיסיות הלוגי

<button>Kiwi</button>
<button>Peach</button>
<button>Coconut</button>

סדר טאבים לא הגיוני

<button style="float: right">Kiwi</button>
<button>Peach</button>
<button>Coconut</button>

חשוב להיזהר כשמשנים את המיקום החזותי של רכיבים באמצעות CSS, כדי שלא ליצור סדר טאבים לא הגיוני. כדי לתקן את סדר הלחצנים הלא הגיוני שלמעלה, צריך להעביר את הלחצן הצף 'Kiwi' כך שיופיע אחרי הלחצן 'Coconut' ב-DOM, ולהסיר את הסגנון בתוך השורה.

הגדרה נכונה של החשיפה של תוכן מחוץ למסך

לפעמים רכיבים אינטראקטיביים מחוץ למסך צריכים להופיע ב-DOM, אבל לא צריכים להופיע בסדר הלחצן Tab. לדוגמה, אם יש לכם תפריט צד רספונסיבי שנפתח כשלוחצים על לחצן, המשתמש לא אמור להיות מסוגל להתמקד בתפריט הצד כשהוא סגור.

כדי למנוע מרכיב אינטראקטיבי מסוים לקבל את המיקוד, צריך להקצות לאלמנט אחד מנכסי ה-CSS הבאים:

• display: none
• visibility: hidden

כדי להוסיף את האלמנט חזרה לסדר הכרטיסיות, למשל כשהתפריט הצדדי פתוח, מחליפים את מאפייני ה-CSS שלמעלה בהתאמה באלה:

• display: block
• visibility: visible

השלבים הבאים

אצל משתמשים שמפעילים את המחשב באמצעות המקלדת או במכשיר אחר לקליטת נתונים, סדר הכרטיסיות הלוגי הוא חיוני כדי להפוך את האפליקציה לנגישה ולשימושית. מומלץ לבדוק את סדר הכרטיסיות באמצעות הקשה על Tab בכל האפליקציה לפני כל פרסום.