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

Rob Dodson

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

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

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

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

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

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

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

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

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

אם סדר המיקוד נראה שגוי, צריך לסדר מחדש את הרכיבים ב-DOM כדי שהסדר של הקליקים על Tab יהיה טבעי יותר. אם רוצים שרכיב מסוים יופיע מוקדם יותר במסך, צריך להעביר אותו מוקדם יותר ב-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 בכל האפליקציה לפני כל פרסום.