أزرار كود المنصات: المواصفة والحالات وأكثر المخالفات تكرارًا
ما الذي يطلبه كود المنصات من عنصر الزر، وما الحالات الست المطلوبة، ولماذا لم تطابق أي منصة من 29 منصة حكومية مقيسة مواصفته كاملة.
وهذه المقالة جزء من دليل كود المنصات، نظام التصميم الموحد للمملكة.
الزر هو الإجراء الأول في أي واجهة، وأكثر مكوّن يتكرر في المنصة. وفي قياس عيّنة من المنصات الحكومية بلغت ٢٩ منصة، لم تطابق منصة واحدة مواصفته كاملة، وبلغ التطبيق الجزئي ٧٩٪.
ما الذي تطلبه القاعدة
معيار ١٢ يقوم على نقطتين:
الأولى: استعمال العنصر كما هو معتمد شكلًا وحوافَ ولونًا ومسافات، دون تعديل على التصميم الأساسي.
الثانية: تطبيق حالاته الست: العادية، والتمرير، والضغط، والاختيار، والتركيز، والتعطيل.
والنقطة الثانية هي المنسية عادةً، لأن الحالات لا تظهر في لقطة شاشة. وأهمها التركيز، وهي التي يعتمد عليها من يتنقل بلوحة المفاتيح.
أكثر ما يُرصد
الحشو خارج السلّم. أكثر ما ظهر في العيّنة كان قيم padding غير معتمدة:
| الخاصية | أقرب قيمة معتمدة | عدد المنصات |
|---|---|---|
padding-top | 8px | ٥ |
background-color | #54C08A · sa-400 | ٣ |
background-color | #14573A · sa-800 | ٣ |
padding-left | 8px | ٣ |
padding-top | 12px | ٣ |
وأثر هذه المخالفة يتجاوز الشكل: الحشو الناقص يكسر مساحة اللمس 44×44px، فيسقط معيار الاستجابة معه.
الوسم غير الدلالي. div مكان button مخالفة قبل أي حديث عن الشكل، إذ تُخرج العنصر من تسلسل لوحة المفاتيح كليًا.
غياب مؤشر التركيز. يُحذف عادةً بقاعدة أنماط عامة تُزيل الحدود الافتراضية، ويقع سهوًا.
إخفاء الأزرار الضرورية داخل القوائم، وازدحامها دون مسافة فاصلة فتقع نقرات عرضية.
التطابق البصري دون أثر المكتبة. الزر يبدو صحيحًا تمامًا ولا يحمل أي dga- ولا --dga-. وهذه العلامة الفارقة على البناء اليدوي: يجتاز مراجعة بصرية اليوم، ولا تصله تحديثات المكتبة غدًا.
ما لا يقيسه أي فحص آلي
الحالات الست تحتاج تفاعلًا: تمريرًا وضغطًا وتنقلًا. وضوابط الفحص تمنع التفاعل مع منصات الجهات، فتبقى هذه النقطة خارج القياس الآلي وتحتاج مراجعة يدوية.
وهذا يعني أن رقم التطبيق الجزئي البالغ ٧٩٪ مبني على النقطة الأولى وحدها. والصورة الكاملة أضيق من ذلك لا أوسع.
كيف تتحققون بأنفسكم
- افحصوا الوسم أولًا:
buttonللإجراء وaللانتقال - قارنوا لون الخلفية ولون الحد بقيم النظام، وانتبهوا إلى القيم القريبة
- قيسوا الحشو، وتحققوا من أن مساحة اللمس لا تقل عن 44×44px على الجوال
- تنقّلوا بلوحة المفاتيح وحدها وانظروا هل يظهر مؤشر تركيز واضح
- افحصوا الحالات الست يدويًا
- عُدّوا الأزرار المتجاورة وتحققوا من المسافة الفاصلة
كيف يُعالَج
استبدلوا الزر من المكتبة بدل تصحيح قيمه. الزر أعلى المكوّنات تكرارًا، فاستبداله أكبر كسب واحد في المعالجة كلها.
صححوا الوسم أولًا. معالجة سطر واحد ترفع إمكانية الوصول ومعيار العنصر معًا.
ارفعوا الحشو حتى تبلغ مساحة اللمس الحد، ولا تكبّروا الأيقونة داخل الزر بديلًا عن ذلك.
أعيدوا مؤشر التركيز إن كان محذوفًا بقاعدة عامة.
للصورة الكاملة اقرأوا الدليل الشامل لكود المنصات، ولقياس أزرار منصتكم ابدأوا فحصًا.