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

רוב דודסון

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

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

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

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

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

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

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

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

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

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

השלבים הבאים

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