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