إنّ ترتيب المحتوى في المستند مهم لضمان سهولة الوصول إلى موقعك الإلكتروني. يقرأ قارئ الشاشة المحتوى استنادًا إلى ترتيب المستند، وذلك باستخدام عناصر HTML لإضافة معنى إضافي إلى هذا المحتوى.
يتنقّل مستخدم في الموقع الإلكتروني باستخدام لوحة المفاتيح بدلاً من شاشة اللمس أو الماوس، ويتنقّل بين علامات التبويب في المستند. تنتقل هذه الأدوات من عنصر نشط إلى آخر، وتستخدم مفتاح Tab للتنقل بين الروابط وحقول النماذج بالترتيب الذي تظهر به العناصر في المستند.
لذلك، يُعدّ البدء بمستند منظَّم بشكل جيد واستخدام عناصر HTML المناسبة جزءًا أساسيًا من إنشاء موقع إلكتروني يسهل الوصول إليه. ومع ذلك، من المحتمل أن تتراجع بعض النتائج الإيجابية عند البدء في استخدام CSS.
الترتيب حسب المصدر مقابل الترتيب المرئي
غالبًا ما يتم ترميز عناصر التنقّل في الموقع الإلكتروني على شكل قائمة من الروابط. يمكنك استخدام Flexbox لتحويلها إلى شريط أفقي. في المثال التالي، أنشأتُ هذا النمط الشائع الاستخدام. انقر على المثال، ثم اضغط على المفتاح Tab للتنقل بين الروابط. ينتقل التركيز في اتجاه منطقي من اليسار إلى اليمين، وهو الترتيب الذي نقرأ به باللغة الإنجليزية.
لنفترض أنّك أنشأت نمط التنقّل هذا ثم طُلب منك نقل التواصل معنا، وهو العنصر الثاني في المصدر، إلى النهاية. يمكنك استخدام السمة order في Flexbox لنقل موضعها.
جرِّب التنقل بين العناصر باستخدام مفتاح Tab في المثال التالي الذي يستخدم السمة order لإعادة ترتيب العناصر.
سينتقل التركيز إلى العنصر الأخير ثم يعود مرة أخرى. في ما يتعلق بترتيب علامات التبويب، يكون هذا العنصر هو العنصر الثاني. ومع ذلك، يظهر العنصر الأخير بصريًا.
يبرز المثال المشكلة التي نواجهها إذا أعدنا ترتيب المحتوى باستخدام CSS. الحلّ الصحيح لهذه المشكلة هو تغيير ترتيب الروابط في المصدر، بدلاً من محاكاة هذا التغيير باستخدام CSS.
ما هي خصائص CSS التي يمكن أن تؤدي إلى إعادة الترتيب؟
يمكن أن تتسبّب أي طريقة تخطيط تتيح لك نقل العناصر في حدوث هذه المشكلة. تتسبّب خصائص CSS التالية عادةً في حدوث مشاكل في إعادة ترتيب المحتوى:
- استخدام
position: absoluteوإخراج عنصر من التدفق بشكل مرئي - السمة
orderفي تصميم المربّع المرن والشبكة - قيم
row-reverseوcolumn-reverseالخاصة بـflex-directionفي Flexbox - قيمة
denseلـgrid-auto-flowفي "تنسيق الشبكة" - أي تحديد موضع حسب اسم السطر أو رقمه، أو باستخدام
grid-template-areasفي Grid Layout.
في المثال التالي، أنشأتُ تخطيطًا باستخدام CSS Grid ووضعتُ العناصر في مواضعها باستخدام أرقام الأسطر، بدون مراعاة مكانها في المصدر.
جرِّب التنقّل باستخدام مفتاح Tab في هذا المثال، ولاحظ كيف ينتقل التركيز. ويؤدي ذلك إلى تجربة مربكة للغاية، خاصةً إذا كانت الصفحة طويلة.
اختبار المشكلة
يمكنك إجراء اختبار سريع من خلال التنقّل في صفحتك باستخدام لوحة المفاتيح. هل يمكنك الوصول إلى كل شيء؟ هل تلاحظ أي قفزات غريبة أثناء التنقل؟
للحصول على عرض مرئي لتغيير ترتيب المحتوى، جرِّب أداة فحص مواضع التوقف في علامات التبويب ضمن إضافة Chrome، Accessibility Insights. تعرض لقطة الشاشة مثالاً على CSS Grid في هذه الأداة. يمكنك ملاحظة كيف يجب أن يتنقّل التركيز في التخطيط.
إعادة ترتيب المحتوى وتصميم الويب السريع الاستجابة
إذا كان لديك عرض تقديمي واحد فقط للمحتوى، يجب أن تتمكّن من الحفاظ على مصدر مرتّب منطقيًا يعكس التنسيق. وقد يكون ذلك أكثر صعوبة عند مراعاة التنسيق عند نقاط توقّف مختلفة. على سبيل المثال، قد يكون من المنطقي نقل عنصر إلى أسفل التنسيق على الشاشات الأصغر.
في الوقت الحالي، لا يتوفّر حلّ مناسب لهذه المشكلة. في معظم الحالات، يمكن أن يساعدك تطوير المحتوى مع إعطاء الأولوية للأجهزة الجوّالة في الحفاظ على ترتيب المصدر والتصميم. إنّ تحديد الأولويات المناسبة للمواقع الإلكترونية المتوافقة مع الأجهزة الجوّالة غالبًا ما يكون مناسبًا لمحتواك بشكل عام. والأهم هو معرفة متى يكون من المحتمل إعادة ترتيب المحتوى. اختبِر المحتوى للتأكّد من أنّ تجربة المستخدم ليست مزعجة عند كل نقطة توقّف.