ضمان استخدام الأيقونات المعتمدة وفق نظام التصميم الموحد (كود المنصات)
يطلب استخدام مكتبة الأيقونات المعتمدة دون تغيير في الحجم أو اللون، وأن تدل الأيقونة على معناها لا على شيء قريب منه. وما زاد على 24px يُستخدم بصيغة الأيقونة المميزة، وما لا تغطيه المكتبة يُصمَّم وفق إرشاداتها ويُرفع للموافقة.
وهو من المعايير الأساسية في فئة الأساسات من دليل كود المنصات، نظام التصميم الموحد للمملكة، الصادر عن هيئة الحكومة الرقمية.
كيف تقيس الأداة هذا المعيار
يقبل هذا المعيار القياس الآلي، ولم تُبنَ له قاعدة في الأداة بعد، فلا يحتسبه الفحص لا سلبًا ولا إيجابًا، ويعرضه التقرير باسمه وحالته. وخطوات التحقق اليدوي أدناه تغطيه كاملًا حتى تُبنى القاعدة.
النص الرسمي ونقاط التحقق
يقوم هذا المعيار على ٤ من نقاط التحقق المنشورة في كود المنصات، وهي المرجع عند الحكم عليه.
- الأحجام المعتمدة: 10 و14 و16px للصغيرة جدًا، و18 و20px للصغيرة، و24px للقياسية، و28 و32px للكبيرة
- المكتبة المعتمدة: Hugeicons
- الأنواع المشمولة: أيقونات النظام، وشعارات التواصل الاجتماعي، ونجوم التقييم، وأدوات التكامل، والأعلام الوطنية
- الحدود الدنيا: تباين 3:1 للأيقونة العامة و4.5:1 للتفاعلية، ومساحة لمس 44×44px
نقاط التحقق، نقطة نقطة
لكل نقطة من نقاط التحقق أدناه إجابة مستقلة: ما تشترطه، وما الذي يجتازها وما الذي يسقط فيها، وكيف تُقاس أو يُتحقق منها، وكيف تُعالَج. ولكل نقطة رابط مباشر يمكن مشاركته.
مكتبة الأيقونات دون استبدال أو تعديل في الحجم واللون
لم تُبنَ له قاعدة بعدDGA-006-aتشترط هذه النقطة استعمال أيقونات مكتبة كود المنصات دون استبدالها بمجموعة أخرى ودون تعديل حجمها أو لونها. والمجموعة المستوردة من مصدر خارجي مخالفة ولو شابهت الأصل في الأسلوب.
يقبل هذا المعيار القياس الآلي ولم تُبنَ للنقطة قاعدة في الأداة بعد، فلا يحتسبها الفحص لا سلبًا ولا إيجابًا.
ما الذي يجتازها: كل أيقونة على الصفحة من مكتبة كود المنصات، بحجمها ولونها المعتمدين.
ما الذي يسقط فيها: مجموعة أيقونات شائعة من طرف ثالث تغطي الصفحة، أو أيقونة رسمية أعيد تلوينها لتناسب قسمًا بعينه.
كيف تُقاس أو يُتحقق منها: تُقارن الأيقونات المرصودة بمكتبة كود المنصات بصمةً وحجمًا ولونًا. ولم تُبنَ لهذا المعيار قاعدة في الأداة بعد، وخطوة التحقق أدناه تغطيه.
كيف تُعالَج: استبدلوا المجموعة الخارجية بأيقونات المكتبة، وأعيدوا الأحجام والألوان المعدَّلة إلى متغيراتها المعتمدة.
نقاط متصلة:ألوان الأيقونات: التنبيهية للتنبيه وحده ·الأيقونة المميزة (Featured icon) فوق ٢٤ بكسل ·الالتزام بألوان كود المنصات دون تعديل
ألوان الأيقونات: التنبيهية للتنبيه وحده
يتحقق منه فريقكمDGA-006-bتفرّق هذه النقطة بين استعمالين للأيقونة: استعمال تنبيهي يأخذ ألوان النجاح والخطأ والتحذير والمعلومة حصرًا، واستعمال عام لتصنيف المحتوى يأخذ ألوانًا محايدة أو أساسية. واستعمال لون تنبيهي لغير التنبيه ممنوع.
لا تُقاس هذه النقطة آليًا، فحكمها يقتضي تفاعلًا مع الصفحة، وأخلاقيات الزحف تمنع التفاعل مع منصات الجهات.
ما الذي يجتازها: أيقونة الخطأ حمراء في رسالة خطأ وحدها، وأيقونات التصنيف رمادية أو خضراء.
ما الذي يسقط فيها: أيقونة قسم بلون التحذير لأنه يناسب هوية القسم بصريًا، فيتعلم المستخدم تجاهل اللون حين يعني تحذيرًا حقيقيًا.
كيف تُقاس أو يُتحقق منها: يُقرأ لون الأيقونة وسياق العنصر الذي تسكنه، فيُفصل السياق التنبيهي عن التصنيفي. ولم تُبنَ لهذا المعيار قاعدة في الأداة بعد.
كيف تُعالَج: احصروا الألوان التنبيهية في الإشعارات ورسائل الحالة، وانقلوا أيقونات التصنيف إلى اللون المحايد أو الأساسي.
نقاط متصلة:مكتبة الأيقونات دون استبدال أو تعديل في الحجم واللون ·استعمال الإشعار في سياقه المحدد ·ألوان العلامات: التنبيهية للتنبيه وحده
الأيقونة المميزة (Featured icon) فوق ٢٤ بكسل
لم تُبنَ له قاعدة بعدDGA-006-cتشترط هذه النقطة أن يُستعمل عنصر الأيقونة المميزة (Featured icon) حين تُطلب أيقونة أكبر من ٢٤ بكسل، لا أن تُكبَّر الأيقونة العادية. وتغيير ألوان متغيرات الأيقونة المميزة وأحجامها ممنوع كذلك.
يقبل هذا المعيار القياس الآلي ولم تُبنَ للنقطة قاعدة في الأداة بعد، فلا يحتسبها الفحص لا سلبًا ولا إيجابًا.
ما الذي يجتازها: كل أيقونة تتجاوز ٢٤ بكسل مستدعاة كأيقونة مميزة بمتغيراتها المعتمدة.
ما الذي يسقط فيها: أيقونة عادية مكبّرة إلى ٤٨ بكسل في قسم مزايا، فتظهر حوافها خشنة وتنفصل عن النظام البصري للأيقونة المميزة.
كيف تُقاس أو يُتحقق منها: تُقاس أحجام الأيقونات المرصودة ويُفحص نوع العنصر المستعمل فوق الحد. ولم تُبنَ لهذا المعيار قاعدة في الأداة بعد.
كيف تُعالَج: استبدلوا الأيقونات المكبّرة بعنصر الأيقونة المميزة من المكتبة دون تعديل متغيراته.
نقاط متصلة:مكتبة الأيقونات دون استبدال أو تعديل في الحجم واللون ·ألوان الأيقونات: التنبيهية للتنبيه وحده ·متغيرات البطاقة المعتمدة: بمحتوى، بصورة، بظل، بلا ظل
طلب اعتماد أيقونة غير موجودة في المكتبة
لم تُبنَ له قاعدة بعدDGA-006-dتشترط هذه النقطة أن تُصمَّم الأيقونة الناقصة وفق إرشادات الأيقونات في كود المنصات، وأن يُرفع طلب اعتمادها عبر القناة التي يحيل إليها المرجع الرسمي. فالنقص في المكتبة لا يبيح استيراد مجموعة خارجية.
يقبل هذا المعيار القياس الآلي ولم تُبنَ للنقطة قاعدة في الأداة بعد، فلا يحتسبها الفحص لا سلبًا ولا إيجابًا.
ما الذي يجتازها: أيقونة واحدة أو أيقونتان مصممتان على إرشادات المكتبة لحاجة لا تغطيها، مع طلب اعتماد مرفوع.
ما الذي يسقط فيها: استيراد مجموعة كاملة من مصدر خارجي بحجة نقص أيقونة واحدة.
كيف تُقاس أو يُتحقق منها: وجود الطلب وحالته خارج ما يُقاس من صفحة عامة، فهذه النقطة يتحقق منها فريق الجهة. والأداة تكتفي برصد الأيقونات الخارجة عن المكتبة.
كيف تُعالَج: صمّموا الناقص على إرشادات المكتبة وارفعوا طلب الاعتماد، وأعيدوا كل ما عداه إلى أيقونات المكتبة.
نقاط متصلة:مكتبة الأيقونات دون استبدال أو تعديل في الحجم واللون ·الأيقونة المميزة (Featured icon) فوق ٢٤ بكسل ·الالتزام بألوان كود المنصات دون تعديل
كيف تتحققون منه يدويًا
وهذه خطوات المراجعة الكاملة للمعيار، وبعضها أوسع مما تغطيه القاعدة الآلية اليوم.
- حدّدوا مصدر الأيقونات أولًا:
svgمضمّن، أو أيقونات خطية محمّلة كخط، أو صورimg - افحصوا أسماء الأصناف والملفات بحثًا عن hugeicons أو dga-icon، فوجودها أثر المكتبة المعتمدة
- ابحثوا عن font-awesome أو material-icons أو bootstrap-icons. وجود أيٍّ منها مكتبة خارجية غير معتمدة، وهو أظهر علامة على المخالفة
- قارنوا الأحجام المرصودة بالسلّم المعتمد، وما زاد على 24px دون نمط الأيقونة المميزة مخالفة
- تحققوا من سمات إمكانية الوصول: الأيقونة الزخرفية تحمل
aria-hidden، والوظيفية تحملaria-labelأو نصًا بديلًا - افحصوا دلالة الأيقونة لا شكلها وحده، فالأيقونة الصحيحة في غير معناها مخالفة لا يرصدها أي قياس آلي
أخطاء شائعة في هذا المعيار
| الخطأ | لماذا يضر |
|---|---|
| مكتبات خارجية | |
| تعديل الحجم/اللون | |
| أحجام غير متسقة | |
| استخدام أيقونة لا تطابق معناها (المثال الرسمي: «إضافة للتقويم» بأيقونة رابط ⇒ خطأ) |
ما يرفقه التقرير مع كل ملاحظة
المحدد + المصدر/المكتبة + الحجم + اللون + سمة ARIA + لقطة
كيف يُعالَج
- احذفوا أي مكتبة أيقونات خارجية واستبدلوها من المكتبة المعتمدة دفعة واحدة، فالإبقاء على مكتبتين يعيد الخلل مع كل عنصر جديد
- استدعوا الأيقونة بحجمها من السلّم، ولا تكبّروها ولا تلوّنوها بعد الاستدعاء
- لما زاد على 24px استعملوا نمط الأيقونة المميزة بدل تكبير الأيقونة القياسية
- أضيفوا
aria-hiddenللزخرفي وaria-labelللوظيفي، وهي أرخص معالجة في هذا المعيار وأكثرها أثرًا على إمكانية الوصول - ما لا تغطيه المكتبة يُصمَّم وفق إرشادات الأيقونات ويُرفع للموافقة، ولا يُستعار من مصدر آخر
معايير متصلة
وفي الدليل: ألوان كود المنصات: اللوحة المعتمدة وأكثر المخالفات تكرارًا · قاعدة الألوان التنبيهية تحكم الأيقونة كما تحكم اللوحة كلها
أين تقف منصتكم من هذا المعيار؟
يصدر الفحص تقديرًا استرشاديًا خلال دقائق، ويبيّن لكل ملاحظة قيمتها المرصودة والمتوقعة وموضعها.