החשיבות של סדר ברירת המחדל של 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 כך שהם יהיו בסדר לוגי.