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

Rob Dodson

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

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

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

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

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

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

  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" כך שהוא יופיע אחרי המילה 'קוקוס' ב-DOM. להסיר את הסגנון המוטבע.

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

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

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

  • display: none
  • visibility: hidden

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

  • display: block
  • visibility: visible

השלבים הבאים

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