החשיבות של סדר ברירת המחדל של DOM
עבודה עם רכיבים מקומיים היא דרך מצוינת ללמוד על התנהגות המיקוד, כי הם מוכנסים באופן אוטומטי לסדר הכרטיסיות על סמך המיקום שלהם ב-DOM.
לדוגמה, יכול להיות שיש לכם שלושה רכיבי לחצן, אחד אחרי השני ב-DOM. לחיצה על Tab תתמקד בכל לחצן לפי הסדר. אפשר ללחוץ על הקוד שבהמשך כדי להעביר את נקודת ההתחלה של ניווט המיקוד, ואז ללחוץ על Tab כדי להעביר את המיקוד בין הלחצנים.
<button>I Should</button>
<button>Be Focused</button>
<button>Last!</button>
עם זאת, חשוב לציין שבעזרת CSS אפשר ליצור מצב שבו פריטים יהיו בסדר אחד ב-DOM אבל יופיעו בסדר אחר במסך. לדוגמה, אם משתמשים במאפיין CSS כמו float כדי להזיז לחצן אחד ימינה, הלחצנים יופיעו בסדר שונה במסך. עם זאת, מכיוון שהסדר שלהם ב-DOM נשאר זהה, כך גם סדר הלחצן Tab. כשהמשתמשים מקישים על Tab בדף, המיקוד עובר בין הלחצנים בסדר לא אינטואיטיבי. אפשר ללחוץ על קטע הקוד שלמטה כדי להעביר את נקודת ההתחלה של ניווט המיקוד, ואז להקיש על Tab כדי להעביר את המיקוד בין הלחצנים.
<button style="float: right">I Should</button>
<button>Be Focused</button>
<button>Last!</button>
חשוב להיזהר כשמשנים את המיקום החזותי של רכיבים במסך באמצעות CSS. כתוצאה מכך, סדר הכרטיסיות עשוי לקפוץ באופן אקראי לכאורה, ולבלבל משתמשים שמסתמכים על המקלדת. לכן, ברשימת המשימות של AIM לאינטרנט בקטע 1.3.2 מצוין שסדר הקריאה והניווט, כפי שנקבע לפי סדר הקוד, צריך להיות לוגי ואינטואיטיבי.
ככלל, מומלץ להקיש על Tab כדי לעבור בין הדפים מדי פעם, רק כדי לוודא שלא שיניתם בטעות את סדר הכרטיסיות. זוהי הרגל טוב שקל לפתח, והוא לא דורש הרבה מאמץ.
תוכן מחוץ למסך
מה קורה אם יש תוכן שלא מוצג כרגע, אבל עדיין צריך להיות ב-DOM, כמו תפריט צד רספונסיבי? כשיש רכיבים כאלה שמקבלים את המיקוד כשהם לא מוצגים במסך, יכול להיות שייראה כאילו המיקוד נעלם ומופיע מחדש כשהמשתמש מקשיב על Tab בדף – וזו בהחלט השפעה לא רצויה. באופן אידיאלי, צריך למנוע מהחלונית לקבל מיקוד כשהיא לא מוצגת במסך, ולאפשר לה לקבל מיקוד רק כשהמשתמש יכול לבצע איתה פעולות.
לפעמים צריך לבצע קצת עבודת בלשות כדי להבין לאן הלך המיקוד. אפשר להשתמש ב-document.activeElement במסוף כדי לברר איזה רכיב נמצא כרגע במוקד.
אחרי שמזהים איזה רכיב מחוץ למסך נמצא בפוקוס, אפשר להגדיר אותו ל-display: none או ל-visibility: hidden, ואז להגדיר אותו חזרה ל-display:
block או ל-visibility: visible לפני שמציגים אותו למשתמש.
באופן כללי, אנחנו ממליצים למפתחים להקיש על Tab באתרים שלהם לפני כל פרסום כדי לוודא שסדר הכרטיסיות לא נעלם או לא קופץ מתוך רצף לוגי. אם זה קורה, צריך לוודא שאתם מסתירים בצורה נכונה תוכן מחוץ למסך באמצעות display: none או visibility: hidden, או לשנות את המיקומים הפיזיים של הרכיבים ב-DOM כך שיוצגו בסדר לוגי.