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

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

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

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

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

איך לתקן

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

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

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

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

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

למה זה חשוב

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

מידע נוסף זמין במאמר איך מבצעים בדיקת נגישות.

משאבים