سفارش DOM مهم است

اهمیت سفارش پیش فرض DOM

دیو گش
Dave Gash
مگین کرنی
Meggin Kearney
راب دادسون

کار با عناصر بومی یک راه عالی برای یادگیری رفتار تمرکز است زیرا آنها به طور خودکار بر اساس موقعیت آنها در 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 به گونه‌ای تنظیم می‌کنید که در یک ترتیب منطقی باشند.