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