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