مختبر يطارد اختلاف الواجهة العربية: مشاريع تخرج تطوير الويب

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

احصر الصفحات والقواعد أولاً

اختر خمس صفحات من تطبيق تجريبي وأربع مجموعات قيم فقط: ألوان الأزرار، المسافات، نصف قطر الزوايا، وحالة اتجاه النص. اكتب جدولاً يربط كل رمز مثل --color-action بقرار مصمم أو دليل مكوّن. لا تلتقط كل قيمة CSS في الموقع ولا تحاول استنتاج تصميم كامل من صورة شاشة. يجب أن يستطيع عضو الفريق معرفة لماذا تعد قيمة مخالفة، وما الحالات التي تستثنى.

اجعل مرجع RTL جزءاً من وثيقة التطوير. يوضح W3C كيفية تحديد اتجاه النص في HTML، كما تقدم WCAG 2.2 معايير لحالات الاستخدام والتباين والتنقل. لا تحوّل قراءة لون آلية إلى ادعاء امتثال كامل؛ الفحص يكشف حالات مختارة فقط، ويحتاج باقي الإتاحة مراجعة منفصلة.

أنشئ رموزاً لها أسماء ومعنى

ضع قيماً مرجعية في ملف CSS مخصص، واربط المكونات بها بدلاً من نسخ اللون يدوياً في كل صفحة. يمكن للفاحص قراءة DOM المحمّل وحساب الخاصية النهائية للزر، ثم عرض اسم الصفحة والعنصر والقيمة الحالية والمتوقعة. افصل القيم الدلالية، مثل لون التحذير، عن قيم خام مثل #d65c32. إذا لم توجد قاعدة متفق عليها، أظهر «بلا مرجع» بدلاً من وصفها بأنها خطأ.

اتجاه النص ينبغي أن يأتي من بنية HTML أو إعداد الصفحة، لا من قلب بصري اعتباطي لكل رمز. اترك أرقام الهواتف وعناوين البريد والنصوص اللاتينية ضمن عزل bidirectional مناسب، واختبر القوائم المختلطة. التقارير يجب أن تحفظ سياق العنصر ولقطة صغيرة لا الصفحة كاملة إن لم تكن هناك حاجة إليها.

التقط الفروق بطريقة قابلة للإعادة

شغل الصفحة بعرض متصفح ثابت وحجم شاشة معروف، انتظر تحميل الخطوط، ثم التقط DOM ولقطة مرئية. قارن الرموز والقيم الفعلية بخريطة التصميم، ولا تقارن صورة كاملة ببكسل واحد؛ قد تؤدي مضادات التعرج واختلاف نظام التشغيل إلى فروق غير مفيدة. سجل إصدار الصفحة والمتصفح واللغة وموعد الفحص. تعرض شاشة التقرير بطاقة لكل مخالفة مع رابط مباشر إلى العنصر أو محدد CSS يمكن للفريق فتحه يدوياً.

مثال افتراضي: صفحة تسجيل تستخدم --space-3 بقيمة 12 بكسل بينما المكوّن المعتمد يستخدم 16. يظهر الفرق مع اسم الزر ومصدر الرمز؛ يستطيع المصمم أن يقرر إن كان هناك استثناء مقصود. الأرقام للشرح فقط ولم نفحص صفحة فعلية.

اختبر الحالات العربية واللاتينية معاً

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

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

اجعل القرار بيد المصمم

ليس كل اختلاف عيباً: صفحة حملة مؤقتة قد تتعمد استخدام لون مختلف، وقد تحتاج بطاقة RTL إلى مسافة غير مطبقة على بطاقة لاتينية. وفّر «استثناء مع سبب» وتاريخ انتهاء حتى لا يتحول التقرير إلى قائمة حمراء يتجاهلها الفريق. لا تعدل صفحات التطبيق آلياً في النسخة الأولى. اجعل الأداة تقدم اقتراحاً وتترك لصاحب الواجهة تطبيقه ومراجعة أثره.

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

مخرجات مشروع قابلة للاستخدام

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