تقتصر الأداة على قراءة الصفحات المنشورة للعموم، ولا تطلب صلاحيات، ولا تحتفظ ببيانات الجهة. والاتصال مشفّر عبر HTTPS.
كود المنصاتقراءة ٥ دقائق

كيف تتحققون من التزام منصتكم بكود المنصات

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

وهذه المقالة جزء من دليل كود المنصات، نظام التصميم الموحد للمملكة.

التحقق من الالتزام بكود المنصات طريقان. اليدوي: يفتح الفريق كل معيار ونقاط تحققه ويقارنها بالمنصة صفحةً صفحة، بترتيب يبدأ من المكتبة ثم القيم الأساسية ثم المكوّنات ثم القوالب. والآلي: تُقرأ القيم المطبَّقة من الصفحات وتُقارن بقيم الكود، فيصدر تقدير مسنود بالأدلة في دقائق. والأول أدق فيما يبلغه ولا يبلغ كل شيء، والثاني أسرع ولا يحكم فيما يقتضي عينًا بشرية.

هذا الدليل يشرح الطريقة اليدوية أولًا، بترتيبها الفعلي، لأن الفريق الذي يفهم ما يُقاس يقرأ أي تقرير قراءة أفضل. ثم يشرح الطريقة الآلية وحدودها.

قبل البدء · الترتيب يهم

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

الترتيب الذي يوفّر أكبر وقت:

  1. ١.المكتبة
  2. ٢.القيم الأساسية
  3. ٣.المكوّنات وحالاتها
  4. ٤.القوالب
  5. ٥.التجربة وإمكانية الوصول

الخطوة الأولى · هل المكتبة مستعملة أصلًا

هذا معيار ١، وهو أهم سؤال في الفحص كله. وقد بلغ التطبيق الكلي فيه ٣٪ في عيّنة من المنصات الحكومية بلغت ٢٩ منصة، أي أن الإجابة عند أغلب الجهات: لا.

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

العلامة الفارقة: عنصر يطابق الشكل بصريًا دون أي إشارة إلى المكتبة عنصر أُعيد بناؤه. وهو يجتاز مراجعة بصرية اليوم، ولا تصله تحديثات النظام أبدًا.

الخطوة الثانية · القيم الأساسية

الألوان. اجمعوا كل قيمة لون مستعملة في الصفحة وقارنوها بلوحة الألوان المعتمدة. وابحثوا تحديدًا عن أربع حالات: قيمة خارج اللوحة، ولون تنبيهي في غير موضع التنبيه، ونص على خلفية ملونة دون قيم On-Color، وتباين دون 4.5:1.

وانتبهوا إلى أن القيم القريبة هي الأكثر تكرارًا، لا البعيدة. اللون الذي يبعد درجة أو درجتين عن المعتمد نمط يظهر عادةً عند نسخ اللون يدويًا بدل استدعائه.

الخطوط. تحققوا من أن الخط IBM Plex Sans Arabic، ومن أن الأوزان لا تخرج عن الأربعة المعتمدة، ومن ارتفاع السطر. والمثال الرسمي هنا صريح: ارتفاع سطر 16 حيث ينبغي 28.

المسافات. قيسوا القيم وقارنوها بسلّم المسافات. وافحصوا padding الأزرار تحديدًا، إذ إن نقصه يكسر مساحة اللمس 44px فيسقط معيارًا آخر معه. وانظروا هل التباعد بين العناصر المترابطة يساوي التباعد بين غير المترابطة، فذلك يضيّع المجموعات البصرية.

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

الخطوة الثالثة · المكوّنات وحالاتها

هنا يقع أكثر ما يُغفل. فكل معيار مكوّن يقوم على ثلاثة أجزاء لا جزء واحد:

  1. التصميم الأساسي دون تعديل
  2. الحالات التفاعلية: التمرير والضغط والتركيز والتعطيل
  3. الحالات السياقية: الاختيار والتحديد والتوسيع

والمراجعة البصرية تفحص الأول وتغفل الاثنين الآخرين، لأنهما لا يظهران في لقطة شاشة. ولذلك يبدو المكوّن سليمًا وهو ناقص.

أربع مخالفات افحصوها في كل مكوّن:

  1. ١.غياب أي إشارة إلى المكتبة رغم التطابق البصري
  2. ٢.غياب مؤشر تركيز مرئي عند التنقل بلوحة المفاتيح
  3. ٣.مساحة لمس دون ٤٤ بكسل
  4. ٤.عنصر غير دلالي مكان الصحيح، مثل div مكان button

وافحصوا الثانية بلوحة المفاتيح وحدها: تنقّلوا في الصفحة بمفتاح الإزاحة دون فأرة، وانظروا هل ترون أين أنتم في كل خطوة. وافحصوا الرابعة من شجرة العناصر لا من الشكل.

الختم الرقمي فحصه أسرع من غيره: موضعه أعلى الصفحة فوق شريط التنقل العلوي، لا في التذييل. وهو المعيار الوحيد الذي بلغ التطبيق الكلي فيه ٤٢٪ في العيّنة، ودلالته أن الالتزام ممكن حين يكون المطلوب منفصلًا وواضحًا.

الخطوة الرابعة · القوالب

القالب لا يُفحص بالنظر، بل بالمقارنة. افتحوا القالب المعتمد وقارنوا الأقسام وترتيبها. وافحصوا الرئيسية والخدمة والمشاركة الإلكترونية، والبحث إن وُجد.

وابحثوا في المشاركة الإلكترونية عن الأقسام المسمّاة بغير اسمها، فهي موجودة ولا يجدها أحد.

حدود الطريقة اليدوية

الفحص اليدوي دقيق فيما يفحصه، ويعجز عن ثلاثة أمور.

النطاق. المنصة الواحدة عشرات الصفحات، وثلاثة مقاسات، ومكوّنات تتكرر بأشكال مختلفة. والمراجع البشري يفحص عيّنة صغيرة ويعمّم.

الاتساق. حكم المراجع على القيمة يختلف بين جلسة وأخرى، وبين مراجع وآخر.

القياس الدقيق. الفرق بين لون معتمد وآخر يبعد عنه درجتين لا تلتقطه العين.

ولذلك يكون الفحص اليدوي أنفع في المعايير التي يحكمها بشر أصلًا، وهي ثمانية من ٥٦: اتساق المصطلحات، ووضوح اللغة، وبديهية التنقل، ونبرة المحتوى وأمثالها. وهذه لا تقيسها أي أداة، وأي أداة تدّعي قياسها تعد بما لا تملك.

الطريقة الآلية

الفحص الآلي يقرأ الصفحات المنشورة للعموم، حتى ثماني صفحات على ثلاثة مقاسات للشاشة، ويقيسها على ٤٨ معيارًا من ٥٦ لكل منها قاعدة صريحة، ويعرض لكل ملاحظة القيمة المرصودة والقيمة المتوقعة والمُحدِّد الذي وردت فيه.

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

والأنفع أن تُقرأ الطريقتان معًا: الفحص الآلي يعطيكم الخريطة كاملة في دقائق، والمراجعة البشرية تحكم ما لا يُقاس.

تنبيه عملي: قد يعيد جدار حماية تطبيقات الويب صفحة حجب برمز HTTP 200، فتُقرأ على أنها صفحة المنصة. وعلاجه إضافة وسم المستخدم وعنوان الأداة إلى قائمة العناوين المسموح بها لدى فريق التقنية.

بعد التحقق، الخطوة التالية هي الترتيب: اقرأوا خطوات تطبيق كود المنصات.

المعايير التي تتناولها هذه المقالة

أين تقف منصتكم من كود المنصات؟

يقيس الفحص الآلي منصتكم خلال دقائق، ويعرض لكل ملاحظة قيمتها المرصودة والمتوقعة وموضعها في الصفحة.

افحصوا منصتكم

تقدير استرشادي · أداة مستقلة غير تابعة لهيئة الحكومة الرقمية

كيف تتحقق من التزام منصتك بكود المنصات: الطريقة اليدوية والآلية | XFix