ترتیب محتوای سند شما برای دسترسی‌پذیری سایت شما مهم است. یک صفحه‌خوان، محتوا را بر اساس ترتیب سند می‌خواند و از عناصر HTML برای افزودن معنای بیشتر به آن محتوا استفاده می‌کند.
شخصی که به جای صفحه لمسی یا ماوس، با صفحه کلید در سایت پیمایش می‌کند، با تب‌ها در سند حرکت می‌کند. او از عنصر فعالی به عنصر فعال دیگر می‌پرد، بین لینک‌ها و فیلدهای فرم، به ترتیبی که عناصر در سند وجود دارند، تب می‌زند.
بنابراین، شروع با یک سند ساختارمند و استفاده از عناصر HTML مناسب، بخش کلیدی ایجاد یک سایت قابل دسترس است. با این حال، با شروع استفاده از CSS، می‌توان برخی از آن کارهای خوب را خنثی کرد.
منبع در مقابل نظم بصری
ناوبری وب‌سایت اغلب به صورت فهرستی از لینک‌ها مشخص می‌شود. می‌توانید از Flexbox برای تبدیل این لینک‌ها به یک نوار افقی استفاده کنید. در مثال زیر، من این الگوی رایج را ایجاد کرده‌ام. روی مثال کلیک کنید و بین لینک‌ها با Tab حرکت کنید. فوکوس در یک جهت منطقی از چپ به راست حرکت می‌کند، ترتیبی که در انگلیسی می‌خوانیم.
فرض کنید این الگوی ناوبری را ایجاد کرده‌اید و سپس از شما خواسته شده است که «تماس با ما» را که در کد منبع دوم است، به انتها منتقل کنید. می‌توانید از ویژگی order Flexbox برای جابجایی مکان آن استفاده کنید.
در مثال بعدی، که از ویژگی order برای مرتب‌سازی مجدد آیتم‌ها استفاده می‌کند، با استفاده از tab، آیتم‌ها را مرور کنید.
فوکوس به آخرین آیتم می‌رود و دوباره برمی‌گردد. تا جایی که به ترتیب تب‌ها مربوط می‌شود، آن آیتم، دومین آیتم است. با این حال، از نظر بصری، آخرین آیتم است.
این مثال، مشکلی را که در صورت تنظیم مجدد و تغییر ترتیب محتوا با استفاده از CSS با آن مواجه می‌شویم، برجسته می‌کند. راه حل مناسب برای این مشکل، تغییر ترتیب لینک‌ها در منبع است، نه اینکه آن تغییر را با استفاده از CSS شبیه‌سازی کنیم.
کدام ویژگی‌های CSS می‌توانند باعث تغییر ترتیب شوند؟
هر روش چیدمانی که به شما امکان جابجایی عناصر را می‌دهد، می‌تواند باعث این مشکل شود. ویژگی‌های CSS زیر معمولاً باعث ایجاد مشکلات تغییر ترتیب محتوا می‌شوند:
- استفاده از
position: absoluteو خارج کردن یک آیتم از جریان بصری. - ویژگی
orderدر Flexbox و طرح‌بندی Grid. - مقادیر
row-reverseوcolumn-reverseبرایflex-directionدر Flexbox. - مقدار
denseبرایgrid-auto-flowدر طرح‌بندی شبکه‌ای. - هرگونه موقعیت‌یابی بر اساس نام یا شماره خط، یا با
grid-template-areasدر طرح‌بندی شبکه‌ای.
در مثال بعدی، من با استفاده از CSS Grid یک طرح‌بندی ایجاد کردم و آیتم‌ها را با استفاده از شماره خط، بدون در نظر گرفتن محل قرارگیری آنها در منبع، قرار دادم.
سعی کنید با استفاده از تب (tab) در این مثال حرکت کنید و ببینید که فوکوس چگونه تغییر می‌کند. این کار باعث می‌شود که صفحه بسیار گیج‌کننده شود، مخصوصاً اگر صفحه طولانی باشد.
آزمایش برای مشکل
یک آزمایش سریع این است که با کیبورد در صفحه خود حرکت کنید. آیا می‌توانید به همه چیز دسترسی پیدا کنید؟ آیا هنگام انجام این کار پرش‌های عجیبی وجود دارد؟
برای نمایش بصری ترتیب‌بندی مجدد محتوا، بررسی‌کننده‌ی Tab Stop را در افزونه‌ی کروم، Accessibility Insights ، امتحان کنید. تصویر، مثال CSS Grid را در آن ابزار نشان می‌دهد. می‌توانید ببینید که چگونه تمرکز باید در طرح‌بندی جابجا شود.
مرتب‌سازی مجدد محتوا و طراحی وب واکنش‌گرا
اگر فقط یک ارائه از محتوای خود دارید، باید بتوانید یک منبع با ترتیب منطقی که منعکس کننده طرح‌بندی باشد را حفظ کنید. این کار می‌تواند زمانی که طرح‌بندی را در نقاط شکست مختلف در نظر می‌گیرید، دشوارتر باشد. به عنوان مثال، ممکن است منطقی باشد که یک عنصر را در صفحه نمایش‌های کوچکتر به پایین طرح‌بندی منتقل کنید.
در حال حاضر، راه حل خوبی برای این مشکل خاص وجود ندارد. در بیشتر مواقع، توسعه رویکرد «اولویت‌بندی موبایل» می‌تواند به شما کمک کند تا منبع و طرح‌بندی خود را مرتب نگه دارید. اولویت‌بندی‌های مناسب برای موبایل اغلب برای محتوای شما در مقیاس بزرگ نیز مناسب هستند. نکته کلیدی این است که بدانید چه زمانی احتمال تغییر ترتیب محتوا وجود دارد. آزمایش کنید تا مطمئن شوید که تجربه نهایی در هر نقطه توقف خیلی نامطلوب نیست.