اهمیت ترتیب پیش‌فرض 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 در بخش ۱.۳.۲ بیان می‌کند که ترتیب خواندن و پیمایش، همان‌طور که با ترتیب کد تعیین می‌شود، باید منطقی و شهودی باشد.
به‌عنوان یک قانون، سعی کنید هر چند وقت یک‌بار با کلید جهش در صفحه‌هایتان جابه‌جا شوید تا مطمئن شوید که به‌طور تصادفی ترتیب جهش را به‌هم نزده‌اید. عادت خوبی است که باید درپیش گرفت و به تلاش زیادی نیاز ندارد.
محتوای خارج از صفحه
اگر محتوایی دارید که درحال‌حاضر نمایش داده نمی‌شود، اما همچنان باید در DOM باشد، مانند یک منو کناری واکنش‌گرا، چه اتفاقی می‌افتد؟ وقتی عناصری مانند این دارید که وقتی خارج از صفحه هستند، فوکوس را دریافت می‌کنند، ممکن است به نظر برسد که فوکوس در حال ناپدید شدن و ظاهر شدن مجدد است، زیرا کاربر از طریق صفحه برگه می‌زند — که به وضوح یک اثر نامطلوب است. در حالت ایده‌آل، باید از متمرکز شدن پانل وقتی خارج از صفحه است جلوگیری کنیم و فقط زمانی اجازه دهیم متمرکز شود که کاربر بتواند با آن تعامل داشته باشد.
گاهی اوقات باید کمی کار کارآگاهی انجام دهید تا بفهمید تمرکز به کجا رفته است. می‌توانید از document.activeElement در کنسول استفاده کنید تا متوجه شوید کدام عنصر درحال‌حاضر کانونی شده است.
وقتی متوجه شدید کدام عنصر خارج از صفحه در کانون توجه قرار دارد، می‌توانید آن را روی
display: none یا visibility: hidden تنظیم کنید و سپس قبل‌از نشان دادن آن به کاربر، آن را دوباره روی display:
block یا visibility: visible تنظیم کنید.
به‌طور کلی، توسعه‌دهندگان را تشویق می‌کنیم قبل‌از هر انتشار، در سایت‌هایشان با کلید جهش پیمایش کنند تا مطمئن شوند ترتیب جهش ناپدید نمی‌شود یا از توالی منطقی خارج نمی‌شود. اگر این‌طور است، باید مطمئن شوید که محتوای خارج از صفحه را به‌درستی با display: none یا visibility: hidden پنهان می‌کنید، یا اینکه موقعیت‌های فیزیکی عناصر را در DOM بازآرایی می‌کنید تا ترتیب منطقی داشته باشند.