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

Rob Dodson

Alexandra Klepper

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

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

מה זה tabindex?

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

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

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

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

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

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

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

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

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

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

במקרה כזה, צריך לזהות את אזור התוכן שנבחר, להקצות לו tabindex של -1 ולקרוא לשיטה 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" על רכיב לא משפיעה על הצאצאים שלו. אם הם נמצאים בסדר הקלדת Tab באופן טבעי או בגלל ערך tabindex, הם ימשיכו להופיע בסדר הקלדת Tab. כדי להסיר רכיב ואת כל הצאצאים שלו מסדר הכרטיסיות, מומלץ להשתמש ב הפולי מילוי inert של WICG. ה-polyfill מדמה את ההתנהגות של מאפיין inert מוצע, שמונעת בחירה או קריאה של אלמנטים על ידי טכנולוגיות מסייעות.

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

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

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

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

שימוש ב-'roving tabindex'

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

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

במקרים כאלה, הרכיב מגדיר את 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. במדריך הזה מפורטים דפוסים נפוצים של ממשק משתמש, ומזהים את המפתחות שהרכיבים צריכים לתמוך בהם.