שליטה בהתמקדות באמצעות Tabindex

Rob Dodson

Alexandra Klepper

לרכיבי HTML רגילים כמו <button> או <input> יש נגישות למקלדת מובנה, ויש להשתמש בו ככל האפשר. אבל אם צריך רכיבים אינטראקטיביים מותאמים אישית, ניתן ליצור את התנהגות המשתמש הצפויה הוספת tabindex.

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

מה זה tabindex?

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

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

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

tabindex="-1": הסרת רכיב מהסדר של הכרטיסיות הטבעיות, אבל הרכיב עדיין יהיה ניתן להתמקד באמצעות קריאה ל-method focus()

tabindex="5": כל אינדקס כרטיסיות שגדול מ-0 יעביר את הרכיב הזה לחזית בסדר הכרטיסיות הטבעיות. אם יש מספר רכיבים שהאינדקס שלהם גדול יותר מהערך 0, סדר הכרטיסיות מתחיל מהערך הנמוך ביותר שגדול מאפס ומתקדמים כל הדרך. שימוש באינדקס Tab שגדול מ-0 נחשב אנטי-דפוס.

מוודאים שאפשר לגשת לפקדים באמצעות המקלדת

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

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

ניהול המיקוד ברמת הדף

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

במקרה הזה, יש לזהות את אזור התוכן שנבחר ולתת לו tabindex של -1 וקוראים ל-method focus שלו. זה מבטיח שהתוכן לא יופיע הסדר של הכרטיסיות הטבעיות. שיטה זו, שנקראת ניהול מיקוד, שומרת על ההקשר הנתפס של המשתמש מסונכרן עם התוכן החזותי של האתר.

ניהול המיקוד ברכיבים

במקרים מסוימים, מומלץ לנהל את המיקוד גם ברמת הבקרה, למשל באמצעות רכיבים מותאמים אישית.

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

הוספת רכיב לסדר הכרטיסיות

מוסיפים רכיב לסדר הכרטיסיות הטבעיות באמצעות tabindex="0". לדוגמה:

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

כדי להתמקד ברכיב, מקישים על המקש Tab או מפעילים את השיטה focus() של הרכיב.

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

הסרת רכיב באמצעות tabindex="-1". לדוגמה:

<button tabindex="-1">Can't reach me with the TAB key!</button>

הפעולה הזו מסירה רכיב מסדר הכרטיסיות הטבעי, אבל הרכיב עדיין יכול להיות באמצעות קריאה ל-method focus().

החלה של tabindex="-1" על רכיב לא משפיעה על הצאצאים שלו. אם סדר הכרטיסיות מופיע באופן טבעי או בגלל ערך tabindex, הן יישארו בסדר הטאבים. כדי להסיר רכיב ואת כל הצאצאים שלו מסדר הכרטיסיות, מומלץ להשתמש ב הפולי מילוי inert של WICG. ה-polyfill מדמה את ההתנהגות של מאפיין inert מוצע, שמונעת בחירה או קריאה של אלמנטים על ידי טכנולוגיות מסייעות.

הימנעות מ-tabindex > 0

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

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

באמצעות Lighthouse אפשר לזהות אלמנטים באמצעות tabindex > 0. להריץ את ביקורת נגישות (Lighthouse > אפשרויות > נגישות) ומחפשים את תוצאות של "לאף רכיב יש ערך [tabindex] גדול מ-0" ביקורת.

שימוש ב'ניווט ב-tabindex'

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

כדי ליישם פונקציות דומות ברכיבים שלכם, אפשר להשתמש בשיטה שידועה כ"נהיגה ב-tabindex". העברת אינדקס כרטיסיות עובדת על ידי הגדרה של tabindex ל-1- עבור כל הילדים מלבד הילד הפעיל הנוכחי. לאחר מכן הרכיב משתמש במקלדת event listener כדי לקבוע על איזה מקש המשתמש לחץ.

במקרים כאלה, הרכיב מגדיר את tabindex של הילד או הילדה שנמצאים במוקד קודם ל-1-, להגדיר את tabindex של הילד כדי להיות ממוקדים יותר ל-0, וקורא לפונקציה focus() עליהם.

לפני

<div role="toolbar">
  <button tabindex="-1">Undo</button>
  <button tabindex="0">Redo</button>
  <button tabindex="-1">Cut</button>
</div>

אחרי

<div role="toolbar">
  <button tabindex="-1">Undo</button>
  <button tabindex="-1">Redo</button>
  <button tabindex="0">Cut</button>
</div>

מתכונים לגישה למקלדת

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