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