80. اعتبارات إمكانية الوصول في Flexbox و Grid

يسمح كل من Flexbox و Grid للمطورين بإعادة ترتيب المحتوى مرئياً باستخدام order (في Flexbox) أو الموضع الصريح (في Grid) بشكل يختلف عن ترتيب كود المصدر في HTML. هذا له تداعيات خطيرة على إمكانية الوصول.

قاعدة ترتيب المصدر (Source Order)

• تقرأ التقنيات المساعدة (مثل قارئات الشاشة) المحتوى بالترتيب الذي يظهر به في كود مصدر HTML ، بغض النظر عن كيفية ترتيب CSS له مرئياً.
• المحتوى الذي تمت إعادة ترتيبه مرئياً يمكن أن يربك المستخدمين الذين يعتمدون على قارئات الشاشة أو التنقل عبر لوحة المفاتيح (الذي يتبع ترتيب المصدر/DOM).

أفضل الممارسات

1. إعطاء الأولوية لـ HTML المنطقي: قم دائماً بهيكلة HTML الخاص بك في أكثر ترتيب قراءة منطقي أولاً.

2. استخدام order بحذر: استخدم خاصية order أو خصائص وضع الشبكة فقط لإجراء تعديلات مرئية بسيطة وضرورية (مثلاً، تحريك أيقونة رقيقة) أو عندما يظل ترتيب القراءة الناتج منطقياً.

   • مثال سيء: تغيير ترتيب حقول النموذج بحيث لا يتطابق الترتيب المرئي (A, B, C) مع ترتيب الانتقال عبر مفتاح Tab (C, B, A).
   • مثال جيد: نقل شريط جانبي ليكون أسفل المحتوى الرئيسي على شاشات الهاتف المحمول، حيث يظل قراءة المحتوى الرئيسي أولاً أمراً منطقياً.

3. اختبار التنقل عبر لوحة المفاتيح: اختبر دائماً تخطيطاتك المعقدة باستخدام مفتاح Tab للتأكد من أن مؤشر التركيز يتحرك بترتيب منطقي ومتسلسل يتوافق مع التصميم المرئي.