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

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

ככלל, נסו לדפדף מדי פעם בכרטיסיות כדי לוודא שלא שיניתם בטעות את סדר הכרטיסיות. זה הרגל טוב לאמץ אותה, וזה לא דורש הרבה מאמץ.

תוכן שאינו מוצג במסך

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

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

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

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