ضمان توافق عنصر الزر مع معايير التصميم الموحد (كود المنصات)
الزر هو الإجراء الأول في أي واجهة، فيطلب المعيار استخدامه بتركيبه المعتمد شكلًا وحوافَ ولونًا ومسافات، وتطبيق حالاته كاملة. والحالة المنسية عادةً هي التركيز، وهي التي يعتمد عليها من يتنقل بلوحة المفاتيح.
وهو من المعايير الأساسية في فئة العناصر من دليل كود المنصات، نظام التصميم الموحد للمملكة، الصادر عن هيئة الحكومة الرقمية.
المعيار في مثال واحد
الزر نفسه، مرة كما يطلبه الكود ومرة كما يُبنى يدويًا.
كيف تقيس الأداة هذا المعيار
تُقرأ القيمة المطبَّقة من الصفحة وتُقارن بالقيمة المعتمدة في كود المنصات، فيصدر الحكم عن قياس لا عن تقدير، وتُرفق القيمة المرصودة والقيمة المتوقعة معًا.
وتشترك معايير العناصر في بنية واحدة: الالتزام بالتصميم الأساسي دون تعديل، ثم الحالات التفاعلية، ثم الحالات السياقية. ويُرصد كذلك العنصر المطابق شكلًا دون أي إشارة إلى مكتبة كود المنصات، إذ يدل ذلك على بناء يدوي منفصل عن المكتبة لا تصله تحديثاتها.
النص الرسمي ونقاط التحقق
يقوم هذا المعيار على ٢ من نقاط التحقق المنشورة في كود المنصات، وهي المرجع عند الحكم عليه.
صفحة هذا المعيار في الموقع الرسمي لكود المنصاتنقاط التحقق، نقطة نقطة
لكل نقطة من نقاط التحقق أدناه إجابة مستقلة: ما تشترطه، وما الذي يجتازها وما الذي يسقط فيها، وكيف تُقاس أو يُتحقق منها، وكيف تُعالَج. ولكل نقطة رابط مباشر يمكن مشاركته.
الزر: مطابقة الشكل والحواف واللون والمسافات
مقيس آليًاDGA-012-aتشترط هذه النقطة استدعاء الزر من مكتبة كود المنصات واستعماله بخصائصه المعتمدة دون تعديل على تصميمه الأساسي، وأخصّها هنا ارتفاعه وحوافه وألوان أنماطه الأساسية والثانوية ومسافاته الداخلية. وتعديل أي منها يخرج العنصر عن المكتبة ولو بقي شبيهًا بها في المظهر.
تقيس الأداة هذه النقطة آليًا، وترفق القيمة المرصودة والقيمة المتوقعة معًا.
ما الذي يجتازها: كل زر على الصفحة يطابق نمطًا معتمدًا في المكتبة: الارتفاع، ونصف قطر الحواف، ولون التعبئة، والحشو الداخلي.
ما الذي يسقط فيها: زر بنصف قطر حواف خاص به لأنه «يناسب هوية القسم»، أو زر ثالث مبتكر خارج الأنماط المعتمدة، أو زر بارتفاع أقل من المعتمد فتضيق مساحة لمسه.
كيف تُقاس أو يُتحقق منها: تُقرأ خصائص الزر المطبَّقة فعلًا وتُقارن بقيم المكتبة، وتُعرض المخالفة مرة لكل قيمة مع عدد مواضعها. والزر المطابق بصريًا بلا إشارة من المكتبة يُصنَّف بناءً يدويًا، ويسقف الحكم عند التطبيق الجزئي.
كيف تُعالَج: استدعوا الزر من مكتبة كود المنصات بدل إعادة بنائه، فتأتي حالاته ومقاساته مضبوطة، وتصل تحديثات المكتبة إليه.
نقاط متصلة:الزر: الحالات التفاعلية (Default · Hovered · Pressed · Selected · Focused · Disabled) ·الرابط: مطابقة الشكل والحواف واللون والمسافات ·الالتزام بألوان كود المنصات دون تعديل
الزر: الحالات التفاعلية (Default · Hovered · Pressed · Selected · Focused · Disabled)
يتحقق منه فريقكمDGA-012-bتشترط هذه النقطة أن يحمل الزر حالاته التفاعلية المعتمدة كاملة (Default · Hovered · Pressed · Selected · Focused · Disabled) بالقيم المنصوص عليها في كود المنصات. وغياب حالة واحدة منها يمنع بلوغ التطبيق الكلي في المعيار.
لا تُقاس هذه النقطة آليًا، فحكمها يقتضي تفاعلًا مع الصفحة، وأخلاقيات الزحف تمنع التفاعل مع منصات الجهات.
ما الذي يجتازها: الزر يعرض ست حالات متمايزة، ومؤشر التركيز فيها ظاهر بتباين كافٍ عند التنقل بلوحة المفاتيح.
ما الذي يسقط فيها: إلغاء مؤشر التركيز في ملف التنسيق لأنه «يشوّه الشكل»، وهي أكثر مخالفات الحالات تكرارًا وأشدها أثرًا على من لا يستعمل الفأرة.
كيف تُقاس أو يُتحقق منها: حالات التمرير والضغط والتركيز والتعطيل لا تُقرأ من صفحة ساكنة، فهي تحتاج تفاعلًا مع العنصر، وأخلاقيات الزحف تمنع التفاعل مع منصات الجهات. تحققوا منها بلوحة المفاتيح وحدها: انتقلوا إلى العنصر وارصدوا مؤشر التركيز، ثم مرّوا عليه بالمؤشر وارصدوا تغيّر الحالة.
كيف تُعالَج: أعيدوا مؤشر التركيز الافتراضي أو استبدلوه بمؤشر أوضح منه، ولا تحذفوه. واستدعوا الزر من المكتبة فتأتي الحالات الست معه.
نقاط متصلة:الزر: مطابقة الشكل والحواف واللون والمسافات ·حقل المدخلات: الحالات التفاعلية (Default · Hovered · Pressed · Focused · Read-only · Disabled) ·الرابط: الحالات التفاعلية (Default · Hovered · Pressed · Focused · Visited · Disabled)
كيف تتحققون منه يدويًا
وهذه خطوات المراجعة الكاملة للمعيار، وبعضها أوسع مما تغطيه القاعدة الآلية اليوم.
- افحصوا زرًا رئيسيًا في أدوات المطور: الوسم أولًا، فـ
divمكانbuttonمخالفة قبل أي حديث عن الشكل - قارنوا لون الخلفية ولون الحد بقيم النظام، وانتبهوا إلى القيم القريبة، فاللون الذي يبعد درجة أو درجتين هو النمط الأكثر تكرارًا
- قيسوا حشو الزر من الأعلى ومن الجانب، وتحققوا من أن مساحة اللمس لا تقل عن 44×44px على الجوال
- تنقّلوا بلوحة المفاتيح وحدها وانظروا هل يظهر مؤشر تركيز واضح على كل زر
- افحصوا الحالات الست يدويًا: العادية والتمرير والضغط والاختيار والتركيز والتعطيل. وهذه لا يقيسها الفحص الآلي، إذ يقتضي رصدها تفاعلًا لا تسمح به ضوابط الفحص
- عُدّوا الأزرار المتجاورة وتحققوا من وجود مسافة فاصلة تمنع النقر العرضي
أخطاء شائعة في هذا المعيار
| الخطأ | لماذا يضر |
|---|---|
| إخفاء الأزرار الضرورية داخل القوائم | |
| ازدحام الأزرار دون مسافة فاصلة (نقرات عرضية) | |
| الانحراف عن تركيب الزر المحدد | |
| عنصر يطابق الشكل بصريًا دون أي من إشارات مكتبة كود المنصات، وهو مؤشر على بناء يدوي منفصل عن المكتبة | فلا تصل إليه تحديثاتها. |
| غياب مؤشر تركيز مرئي واضح عند التنقل بلوحة المفاتيح | |
| مساحة لمس دون ٤٤ بكسل في العناصر التفاعلية | |
استخدام عنصر غير دلالي مكان العنصر الصحيح، مثل div بدل button |
كيف يُعالَج
- استبدلوا الزر من المكتبة بدل تصحيح قيمه واحدة واحدة، فالزر أعلى المكوّنات تكرارًا وأكثرها كسبًا عند الاستبدال
- صححوا الوسم أولًا:
buttonللإجراء و a للانتقال. وهذه معالجة سطر واحد ترفع إمكانية الوصول ومعيار العنصر معًا - ارفعوا الحشو حتى تبلغ مساحة اللمس الحد، ولا تكبّروا الأيقونة داخل الزر بديلًا عن ذلك
- أعيدوا مؤشر التركيز إن كان محذوفًا بقاعدة عامة، فحذفه أكثر شيوعًا مما يُظن ويقع سهوًا
- أخرجوا الأزرار الضرورية من القوائم المطوية إلى مستوى الصفحة
معايير متصلة
وفي الدليل: أزرار كود المنصات: المواصفة والحالات وأكثر المخالفات تكرارًا · المواصفة والحالات الست وأكثر ما يُرصد على العيّنة
لم تطبّقه أي من ٢٩ منصة حكومية مقيسة
- ٥ منصات
- ٣ منصات
- ٣ منصات
- ٣ منصات
- ٣ منصات
والقياس على عيّنة من المنصات المنشورة للعموم بالمنهجية نفسها المنشورة في صفحة المنهجية.
أين تقف منصتكم من هذا المعيار؟
يصدر الفحص تقديرًا استرشاديًا خلال دقائق، ويبيّن لكل ملاحظة قيمتها المرصودة والمتوقعة وموضعها.