הפקדים האינטראקטיביים ניתנים למיקוד באמצעות המקלדת

פורסם: 2 במאי 2019

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

איך בודקים באופן ידני

כדי לבדוק שאפשר להעביר את המיקוד לרכיב הבקרה המותאם אישית ושמוצג בו סימן מיקוד, מתחילים להשתמש במקש Tab כדי לעבור בין הרכיבים באתר. משתמשים ב-TAB (או ב-SHIFT + TAB) כדי לעבור בין אמצעי הבקרה, ובמקשי החיצים וב-ENTER ו-SPACE כדי לשנות את הערכים שלהם (אפשר גם לעיין במאמר יסודות הגישה באמצעות מקלדת):

האם יש לך אפשרות להגיע לכל אמצעי הבקרה האינטראקטיביים בדף? האם יש אינדיקטור למיקוד בכל אמצעי בקרה אינטראקטיבי?

איך לפתור את הבעיה

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

כדי להגדיר שניתן יהיה להתמקד בפקד בהתאמה אישית, צריך להוסיף את רכיב הפקד בהתאמה אישית לסדר הטבעי של מקשי Tab באמצעות tabindex="0" (אפשר גם לעיין במאמר שליטה בהתמקדות באמצעות tabindex). לדוגמה:

<div tabindex="0">Focus me with the TAB key</div>

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

אם לא רואים את סימן המיקוד, כדאי להשתמש ב-:focus כדי להציג תמיד את סימן המיקוד. לא משנה אם משתמשים בעכבר או במקלדת כדי להגיע ללחצן באמצעות Tab, סימן המיקוד של הלחצן תמיד נראה אותו דבר (ראו גם מיקוד סגנון).

למה זה חשוב

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

מידע נוסף על נגישות

משאבים