ترتیب محتوا در سند شما برای دسترسی به سایت شما مهم است. یک صفحه‌خوان محتوا را بر اساس ترتیب سند، با استفاده از عناصر HTML که برای معنا بخشیدن به آن محتوا انتخاب کرده‌اید، می‌خواند. شخصی که سایت را با استفاده از صفحه کلید به جای صفحه لمسی یا ماوس هدایت می کند، در اطراف سند زبانه می زند. این به این معنی است که آنها از عنصر فعال به عنصر فعال می‌پرند و بین پیوندها و فیلدهای فرم، بار دیگر به ترتیبی که در سند وجود دارند، تب می‌شوند.
بنابراین شروع با یک سند با ساختار خوب و استفاده از تمام عناصر HTML مناسب، بخش کلیدی ایجاد یک سایت قابل دسترس است. با این حال، زمانی که شروع به استفاده از CSS می کنید، می توان برخی از این کارهای خوب را لغو کرد. بیایید نگاهی به چرایی آن بیاندازیم.
منبع در مقابل نظم بصری
ناوبری وب سایت اغلب به عنوان لیستی از پیوندها علامت گذاری می شود. سپس می توانید از Flexbox برای تبدیل آنها به نوار افقی استفاده کنید. در مثال Glitch زیر، من این الگوی رایج را ایجاد کرده ام. روی مثال کلیک کنید و بین پیوندها تب کنید. فوکوس در جهتی منطقی از چپ به راست حرکت می کند، ترتیبی که به زبان انگلیسی می خوانیم.
اگر این نوع الگو را ایجاد کرده اید و سپس از شما خواسته شده است که با ما تماس بگیرید ، که در منبع دوم قرار دارد، به انتها منتقل کنید. می توانید از ویژگی order که در Flexbox کار می کند استفاده کنید. سعی کنید موارد موجود در مثال زیر را که از ویژگی order برای مرتب کردن مجدد آیتم ها استفاده کرده است، استفاده کنید.
فوکوس به مورد نهایی و سپس دوباره برمی گردد. تا آنجا که به ترتیب برگه مربوط می شود، آن آیتم دومین مورد است. با این حال، از نظر بصری، آخرین مورد است.
مثال بالا مشکلی را که در صورت تنظیم مجدد و مرتب سازی مجدد محتوا با استفاده از 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 Stop را در افزونه Accessibility Insights برای Chrome امتحان کنید. تصویر زیر نمونه CSS Grid را در آن ابزار نشان می دهد. می توانید ببینید که چگونه فوکوس باید به اطراف طرح بپرد.
سفارش مجدد محتوا و طراحی وب سایت واکنش گرا
اگر فقط یک ارائه از محتوای خود دارید، پس داشتن منبع خود در یک ترتیب منطقی و انعکاس آن در طرح معمولاً دشوار نیست. وقتی طرح را در نقاط شکست مختلف در نظر می گیرید، می تواند سخت تر شود. ممکن است منطقی باشد که یک عنصر به عنوان مثال در صفحه های کوچکتر به پایین طرح بندی منتقل شود.
در حال حاضر راه حل مناسبی برای این مشکل وجود ندارد. در اکثر مواقع توسعه "موبایل اول" به شما کمک می کند منبع و طرح خود را مرتب نگه دارید. انتخاب هایی که در مورد اولویت در تلفن همراه انجام می دهید، اغلب برای محتوا به طور کلی گزینه های محکمی هستند. نکته کلیدی این است که از زمانی که احتمال این نوع از مرتب سازی مجدد محتوا وجود دارد، آگاه باشید و آزمایش کنید که تجربه نهایی در هر نقطه انفصال خیلی سخت نباشد.