جداول التخطيط فخ

منذ سنوات، كان المطورون ينشئون تنسيقات الصفحات باستخدام العنصر table. وما زالت هذه العادة موجودة في الشيفرات القديمة، ولا تزال تسبب أضرارًا حقيقية لإمكانية الوصول حتى اليوم.

يتعامل قارئ الشاشة مع كل جدول على أنه بيانات. لذلك يعلن عن الصفوف والأعمدة وعدد الخلايا في التنسيق، مما يغرق المستخدمين في بنية لا معنى لها.

غالبًا ما توزع جداول التنسيق المحتوى على خلايا بترتيب مربك. فينفصل الترتيب المرئي عن ترتيب القراءة، ويضيع المستخدمون.

ينبغي أن يكون التنسيق الحديث من اختصاص CSS. استخدم flexbox أو grid لترتيب الصفحة، واقصر استخدام عنصر table على البيانات الجدولية الحقيقية.

عندما تصطف العناصر في صف أو عمود، يكون flexbox الأداة الطبيعية لذلك. فهو يتكيف مع المحتوى من دون أن تتدخل دلالات الجداول.

عند التعامل مع الصفوف والأعمدة معًا، يوفر لك CSS grid نظام تنسيق حقيقيًا. فهو يفصل بين مظهر الصفحة ومعنى ترميزها.

باستخدام تنسيق CSS، يمكنك أن تستخدم في HTML معالم حقيقية مثل header وnav وmain. ويحصل مستخدمو قارئات الشاشة على خريطة مفيدة بدلًا من مجرد أعداد للخلايا.

إذا تعذر عليك حقًا إزالة جدول تنسيق قديم، فأضف role=presentation. فهذا يزيل دلالات الجدول، بحيث تتجاهل التقنيات المساعدة الشبكة.

تعامل مع role=presentation كضمادة مؤقتة. أما الإصلاح الحقيقي فهو الانتقال إلى CSS، لأنه يزيل المشكلة بدلًا من إخفائها مؤقتًا.

غياب caption وth، واحتواء الخلايا على أقسام كاملة بدلًا من قيم، كلها مؤشرات تحذيرية. فهذا النمط يشير غالبًا إلى وجود جدول تنسيق يحتاج إلى إعادة هيكلة.

اطرح هذا السؤال البسيط عن أي جدول: هل يعرض بيانات في صفوف وأعمدة من القيم المترابطة؟ إذا لم يكن كذلك، فهو جدول تنسيق وينبغي استبداله بـ CSS.

لقد ورثت صفحة تستخدم جدولًا لمجرد وضع أعمدة من المحتوى في أماكنها.

لا تستخدم table لتنسيق الصفحة أبدًا. استخدم flexbox أو grid، وخصص table للبيانات الحقيقية، وتعامل مع role=presentation كحل مؤقت فقط في الشيفرات القديمة.