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