דף זה תורגם על ידי Cloud Translation API.

עניינים בסדר DOM

החשיבות של סדר ברירת המחדל של ה-DOM

Dave Gash

Meggin Kearney

Rob Dodson

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

חלונית פתוחה מחוץ למסך יכולה לגנוב את המיקוד.

לפעמים צריך להשקיע עבודת בלשים כדי להבין איפה להתמקד עוברים. אפשר להשתמש ב-document.activeElement מהמסוף כדי להבין איזה שממוקד כרגע.

אחרי שמחליטים על איזה רכיב להתמקד מחוץ למסך, אפשר להגדיר אותו display: none או visibility: hidden, ואז להגדיר אותו חזרה לערך display: block או visibility: visible לפני שיוצג למשתמשים.

באופן כללי, אנחנו ממליצים למפתחים לעבור על האתרים שלהם לפני לפרסם כדי לראות שסדר הכרטיסיות לא נעלם או קופץ ברצף. אם כן, עליך לוודא שאינך מסתתרת כראוי להשבית את התוכן במסך באמצעות display: none או visibility: hidden, או שאתם סידור מחדש של רכיבים את המיקומים הפיזיים ב-DOM כך שהם הזמנה.