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

Rob Dodson

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

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

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

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

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

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

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

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

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

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

לדוגמה:

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

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

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

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

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

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

• display: none
• visibility: hidden

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

• display: block
• visibility: visible

השלבים הבאים

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