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

Rob Dodson

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

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

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

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

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

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

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

מסדרים את הרכיבים ב-DOM לפי סדר לוגי

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

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

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

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

סדר לא הגיוני של כרטיסיות

הקוד של שתי הדוגמאות האלה מושווה למטה:

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

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

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

  • display: none
  • visibility: hidden

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

  • display: block
  • visibility: visible

השלבים הבאים

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