החשיבות של סדר ברירת המחדל של ה-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 עומד בסעיף 1.3.2 שסדר הקריאה והניווט, כפי שנקבע לפי סדר הקוד, צריך להיות הגיוני ואינטואיטיבי.
ככלל, כדאי לעבור בין הכרטיסיות מדי פעם, רק כדי לוודא לא שיבש בטעות את סדר הכרטיסיות. הנה הרגל טוב לאמץ שלא מצריכה מאמץ רב.
תוכן שלא מופיע במסך
מה אם יש לך תוכן שלא מוצג כרגע, אך עדיין צריך להיות ב-DOM, למשל ניווט צדדי רספונסיבי? כשיש רכיבים כאלה מקבלים מיקוד כשהם לא מופיעים במסך, נראה שהמיקוד נעלמים ומופיעים שוב בזמן שהמשתמשים מנווטים בדף — בבירור אפקט לא רצוי. במצב אידיאלי, צריך למנוע מהפאנל להתמקד כשהאפשרות לא מוצגת במסך, ומאפשרת להתמקד בה רק כשהמשתמש יכול לבצע אינטראקציה איתו.
![חלונית פתוחה מחוץ למסך יכולה לגנוב את המיקוד.](https://web.dev/static/articles/dom-order-matters/image/an-offscreen-slide-panel-418516732500b.png?authuser=0&hl=he)
לפעמים צריך להשקיע עבודת בלשים כדי להבין איפה להתמקד
עוברים. אפשר להשתמש ב-document.activeElement
מהמסוף כדי להבין איזה
שממוקד כרגע.
אחרי שמחליטים על איזה רכיב להתמקד מחוץ למסך, אפשר להגדיר אותו
display: none
או visibility: hidden
, ואז להגדיר אותו חזרה לערך display:
block
או visibility: visible
לפני שיוצג למשתמשים.
![חלונית נפתחת שלא מוצגת בה אף אחת.](https://web.dev/static/articles/dom-order-matters/image/a-slide-panel-set-displ-4e959c65a9e47.png?authuser=0&hl=he)
![חלונית שניתן להחליק כדי להציג בה בלוק.](https://web.dev/static/articles/dom-order-matters/image/a-slide-panel-set-displ-ccba12904336f.png?authuser=0&hl=he)
באופן כללי, אנחנו ממליצים למפתחים לעבור על האתרים שלהם לפני
לפרסם כדי לראות שסדר הכרטיסיות לא נעלם או קופץ
ברצף. אם כן, עליך לוודא שאינך מסתתרת כראוי
להשבית את התוכן במסך באמצעות display: none
או visibility: hidden
, או שאתם
סידור מחדש של רכיבים את המיקומים הפיזיים ב-DOM כך שהם
הזמנה.