בדיקה ידנית שכל הפקדים המותאמים אישית ניתנים למיקוד באמצעות המקלדת ומציגים אינדיקטור מיקוד. הסדר שבו הרכיבים מתמקדים צריך להיות לפי סדר ה-DOM. אם אתם לא בטוחים באילו רכיבים כדאי להתמקד, קראו את המאמר מבוא להתמקדות.
איך מבצעים בדיקה ידנית
כדי לבדוק אם הפקד המותאם אישית ניתן למיקוד ומציג אינדיקטור של מיקוד, התחילו על ידי מעבר באמצעות המקש Tab.
אפשר להשתמש ב-TAB (או ב-SHIFT +
TAB) כדי לעבור בין פקדים, ולהשתמש במקשי החיצים וב-ENTER וב-SPACE כדי לשנות את הערכים שלהם (מידע נוסף זמין גם ביסודות הגישה למקלדת):
האם אתם מצליחים להגיע לכל הפקדים האינטראקטיביים בדף? האם יש חיווי התמקדות בכל פקד אינטראקטיבי?
איך פותרים את הבעיה
אם אין לכם אפשרות להקיש על Tab כדי לעבור בין כל הרכיבים בדף, יכול להיות שתצטרכו להשתמש ברכיב tabindex כדי לשפר את יכולת המיקוד של הפקדים האלה.
כדי שיהיה אפשר להתמקד בפקד בהתאמה אישית, מוסיפים את רכיב הבקרה המותאם אישית לסדר הכרטיסיות הטבעי באמצעות tabindex="0" (מידע נוסף זמין במאמר Control Focus with tabindex).
לדוגמה:
<div tabindex="0">Focus me with the TAB key</div>
ייתכן שתצטרכו גם להוסיף את תפקידי ה-ARIA המתאימים לרכיבי הבקרה בהתאמה אישית. לפרטים, אפשר לעיין בקטע לפקדים בהתאמה אישית יש תפקידי ARIA.
אם לא מופיע אינדיקטור של מיקוד, כדאי להשתמש ב-:focus כדי להציג תמיד אינדיקטור של מיקוד.
לא משנה אם משתמשים בעכבר או במקלדת כדי להקיש על Tab, מחוון המיקוד של הלחצן תמיד נראה אותו הדבר (ראו גם מיקוד סגנון).
למה זה חשוב
עבור משתמשים שלא יכולים או בוחרים שלא להשתמש בעכבר, ניווט באמצעות המקלדת הוא הדרך העיקרית להגיע לכל מה שמופיע במסך. חוויות מקלדת טובות תלויות בסדר לוגי של כרטיסיות ובסגנונות מיקוד שקל להבחין בהן. אם משתמש במקלדת לא יכול לראות את מה שנמצא במיקוד, אין לו דרך ליצור אינטראקציה עם הדף.
מידע נוסף זמין במאמר איך לבצע בדיקת נגישות.