יש להתמקד בפקדים אינטראקטיביים בהתאמה אישית. לדוגמה, אם משתמשים ב-JavaScript כדי להפוך את <div> לתפריט נפתח מעוצב, התפריט הנפתח לא מתווסף באופן אוטומטי לסדר הכרטיסיות הנכון.
אתם צריכים לבדוק ידנית שכל הפקדים בהתאמה אישית ניתנים למיקוד במקלדת.
במידת האפשר, כדאי להשתמש ברכיבי HTML סמנטיים שמאפשרים אינטראקציה.
איך בודקים
כדי לבדוק אם אפשר להתמקד בפקד המותאם אישית, מקישים על המקש TAB כדי לנווט באתר:
יש לך אפשרות לגשת לכל הלחצנים האינטראקטיביים בדף?
אם לא, יכול להיות שיהיה צורך להשתמש בtabindex כדי לשפר את המיקוד של הפקדים האלה.
אפשר לעיין גם במאמר שליטה בפוקוס באמצעות tabindex.
איך לתקן
כדי שניתן יהיה להתמקד בפקד בהתאמה אישית, מוסיפים את רכיב הבקרה המותאם אישית לסדר הכרטיסיות הטבעיות באמצעות tabindex="0".
לדוגמה:
<div tabindex="0">Focus me with the TAB key</div>
למה זה חשוב
משתמשים שלא יכולים להשתמש בעכבר או שבוחרים לא להשתמש בו, יכולים להשתמש בניווט במקלדת כדי להגיע לכל הרכיבים במסך. כדי שחוויית השימוש במקלדת תהיה טובה, צריך להקפיד על סדר לוגי של הכרטיסיות ועל סגנונות התמקדות מובחנים. אם משתמש במקלדת לא יכול לראות את האזור שבו מופיע המיקוד, אין לו אפשרות לבצע אינטראקציה עם הדף.
אם אתם מתחילים לבדוק נגישות, מומלץ לקרוא על בדיקת נגישות ידנית ועל בדיקת טכנולוגיות מסייעות.