التأكد من استخدام عنصر البطاقة وفقًا لمعايير التصميم الموحد (كود المنصات)
البطاقة تعرض عنصرًا واحدًا بصورته وعنوانه وإجراءاته. ويطلب المعيار الشكل المعتمد بحوافه ومسافاته الداخلية، واتساق البطاقات في الشبكة الواحدة ارتفاعًا وتركيبًا.
وهو من المعايير الأساسية في فئة العناصر من دليل كود المنصات، نظام التصميم الموحد للمملكة، الصادر عن هيئة الحكومة الرقمية.
كيف تقيس الأداة هذا المعيار
يُقاس هذا المعيار من بنية الصفحة ومن قراءة لقطتها، ولذلك تكون الثقة فيه دون الثقة في القيمة المقروءة مباشرة، ويظهر ذلك في عرض النطاق.
وتشترك معايير العناصر في بنية واحدة: الالتزام بالتصميم الأساسي دون تعديل، ثم الحالات التفاعلية، ثم الحالات السياقية. ويُرصد كذلك العنصر المطابق شكلًا دون أي إشارة إلى مكتبة كود المنصات، إذ يدل ذلك على بناء يدوي منفصل عن المكتبة لا تصله تحديثاتها.
النص الرسمي ونقاط التحقق
يقوم هذا المعيار على ٥ من نقاط التحقق المنشورة في كود المنصات، وهي المرجع عند الحكم عليه.
صفحة هذا المعيار في الموقع الرسمي لكود المنصاتنقاط التحقق، نقطة نقطة
لكل نقطة من نقاط التحقق أدناه إجابة مستقلة: ما تشترطه، وما الذي يجتازها وما الذي يسقط فيها، وكيف تُقاس أو يُتحقق منها، وكيف تُعالَج. ولكل نقطة رابط مباشر يمكن مشاركته.
البطاقة: مطابقة الشكل والحواف واللون والمسافات
مقيس آليًاDGA-028-aتشترط هذه النقطة استدعاء البطاقة من مكتبة كود المنصات واستعماله بخصائصه المعتمدة دون تعديل على تصميمه الأساسي، وأخصّها هنا حوافها وظلها وحشوها الداخلي ومسافات عناصرها. وتعديل أي منها يخرج العنصر عن المكتبة ولو بقي شبيهًا بها في المظهر.
تقيس الأداة هذه النقطة آليًا، وترفق القيمة المرصودة والقيمة المتوقعة معًا.
ما الذي يجتازها: بطاقات مستدعاة من المكتبة، متساوية الحشو والحواف داخل الشبكة الواحدة.
ما الذي يسقط فيها: بطاقات بظل خاص بها ونصف قطر حواف مختلف عن المعتمد، فتصير الشبكة نظامًا بصريًا ثانيًا.
كيف تُقاس أو يُتحقق منها: تُرصد البطاقات بأسماء أصنافها وبنيتها، وتُقرأ خصائصها وتُقارن بالمكتبة.
كيف تُعالَج: استدعوا البطاقة من المكتبة ووحّدوا خصائصها في الشبكة الواحدة.
نقاط متصلة:ما يُسمح بتغييره في البطاقة: المحاذاة والمساحات وحدهما ·متغيرات البطاقة المعتمدة: بمحتوى، بصورة، بظل، بلا ظل ·أزرار الإجراء في البطاقات الإجرائية دون المعلوماتية
البطاقة: الحالات التفاعلية (Default · Hover · Focused · Disabled)
يتحقق منه فريقكمDGA-028-bتشترط هذه النقطة أن يحمل البطاقة حالاته التفاعلية المعتمدة كاملة (Default · Hover · Focused · Disabled) بالقيم المنصوص عليها في كود المنصات. وغياب حالة واحدة منها يمنع بلوغ التطبيق الكلي في المعيار.
لا تُقاس هذه النقطة آليًا، فحكمها يقتضي تفاعلًا مع الصفحة، وأخلاقيات الزحف تمنع التفاعل مع منصات الجهات.
ما الذي يجتازها: البطاقة القابلة للنقر يبلغها التنقل بلوحة المفاتيح ومؤشر التركيز ظاهر عليها كاملة.
ما الذي يسقط فيها: بطاقة قابلة للنقر بأكملها ولا يبلغها إلا رابط العنوان داخلها، فتختلف مساحة النقر عن مساحة التركيز.
كيف تُقاس أو يُتحقق منها: حالات التمرير والضغط والتركيز والتعطيل لا تُقرأ من صفحة ساكنة، فهي تحتاج تفاعلًا مع العنصر، وأخلاقيات الزحف تمنع التفاعل مع منصات الجهات. تحققوا منها بلوحة المفاتيح وحدها: انتقلوا إلى العنصر وارصدوا مؤشر التركيز، ثم مرّوا عليه بالمؤشر وارصدوا تغيّر الحالة.
كيف تُعالَج: اجعلوا مساحة التفاعل واحدة للفأرة وللوحة المفاتيح، وأظهروا التركيز على البطاقة لا على عنوانها وحده.
نقاط متصلة:أزرار الإجراء في البطاقات الإجرائية دون المعلوماتية ·البطاقة: مطابقة الشكل والحواف واللون والمسافات ·الزر: الحالات التفاعلية (Default · Hovered · Pressed · Selected · Focused · Disabled)
ما يُسمح بتغييره في البطاقة: المحاذاة والمساحات وحدهما
مقيس آليًاDGA-028-cتحصر هذه النقطة ما يجوز تغييره في البطاقة في حالتين لا ثالث لهما: تغيير محاذاة عناصرها الداخلية، أو تغيير مساحاتها الداخلية لخلق تباين بين بطاقات متعددة. وكل ما عدا ذلك ممنوع.
تقيس الأداة هذه النقطة آليًا، وترفق القيمة المرصودة والقيمة المتوقعة معًا.
ما الذي يجتازها: بطاقة رئيسية بحشو أوسع تميّزها عن جاراتها، وبطاقات وسط محاذاة عناصرها.
ما الذي يسقط فيها: تغيير لون خلفية البطاقة أو نصف قطر حوافها بدعوى التمييز، وهو خارج الحالتين المسموحتين.
كيف تُقاس أو يُتحقق منها: تُقارن خصائص البطاقات بالمعتمد، فتُفصل الفروق المسموحة في المحاذاة والمساحة عن الفروق الممنوعة في اللون والحواف.
كيف تُعالَج: أعيدوا الألوان والحواف إلى المعتمد، وميّزوا البطاقة المهمة بالحشو أو المحاذاة، فهما ما يجيزه الكود.
نقاط متصلة:متغيرات البطاقة المعتمدة: بمحتوى، بصورة، بظل، بلا ظل ·البطاقة: مطابقة الشكل والحواف واللون والمسافات ·متغيرات المسافات العامة دون مسافات مخصصة للعناصر
متغيرات البطاقة المعتمدة: بمحتوى، بصورة، بظل، بلا ظل
مقيس آليًاDGA-028-dتشترط هذه النقطة تطبيق متغيرات البطاقة المحددة في كود المنصات، مثل البطاقة بمحتوى والبطاقة بصورة والبطاقة بظل وبلا ظل. فالمتغير يُختار من القائمة المعتمدة، ولا يُركَّب متغير خامس منها.
تقيس الأداة هذه النقطة آليًا، وترفق القيمة المرصودة والقيمة المتوقعة معًا.
ما الذي يجتازها: كل بطاقة على الصفحة تنتمي إلى متغير معتمد واحد، والاختيار بينها يتبع نوع المحتوى.
ما الذي يسقط فيها: بطاقة تجمع ظلًا وحدًّا ولونًا مميزًا معًا، فتصير متغيرًا خامسًا لا يقابله شيء في المكتبة.
كيف تُقاس أو يُتحقق منها: تُقرأ خصائص كل بطاقة وتُنسب إلى أقرب متغير معتمد، فيظهر ما لا ينتمي إلى أيّها.
كيف تُعالَج: انسبوا كل بطاقة إلى متغير واحد من القائمة، واحذفوا الخصائص التي جاءت من متغير آخر.
نقاط متصلة:ما يُسمح بتغييره في البطاقة: المحاذاة والمساحات وحدهما ·البطاقة: مطابقة الشكل والحواف واللون والمسافات ·الأيقونة المميزة (Featured icon) فوق ٢٤ بكسل
أزرار الإجراء في البطاقات الإجرائية دون المعلوماتية
مقيس آليًاDGA-028-eتشترط هذه النقطة توفّر زر إجراء في البطاقات الإجرائية القابلة للنقر، ولا تشترطه في البطاقات المعلوماتية. فالشرط مقيّد بغرض البطاقة، ووضع زر في بطاقة معلوماتية ليس التزامًا زائدًا بل خلط بين النوعين.
تقيس الأداة هذه النقطة آليًا، وترفق القيمة المرصودة والقيمة المتوقعة معًا.
ما الذي يجتازها: بطاقة خدمة تحمل زر إجراء واضحًا، وبطاقة إحصاء معلوماتية بلا زر.
ما الذي يسقط فيها: بطاقة كاملة قابلة للنقر بلا أي إشارة إلى أنها كذلك، فلا يعلم المستخدم أنها إجراء.
كيف تُقاس أو يُتحقق منها: يُرصد وجود عناصر الإجراء داخل البطاقات ويُقارن بقابلية البطاقة للنقر.
كيف تُعالَج: أضيفوا زر إجراء إلى البطاقات القابلة للنقر، واحذفوا الأزرار من البطاقات المعلوماتية.
نقاط متصلة:البطاقة: الحالات التفاعلية (Default · Hover · Focused · Disabled) ·الزر: مطابقة الشكل والحواف واللون والمسافات ·البطاقة: مطابقة الشكل والحواف واللون والمسافات
كيف تتحققون منه يدويًا
وهذه خطوات المراجعة الكاملة للمعيار، وبعضها أوسع مما تغطيه القاعدة الآلية اليوم.
- افحصوا اتساق الارتفاع في الشبكة
- تحققوا من وجود زر إجرائي على البطاقات القابلة للنقر
- افحصوا بنية الرابط: البطاقة كلها رابط أم العنوان وحده
- افحصوا النص البديل للصور
أخطاء شائعة في هذا المعيار
| الخطأ | لماذا يضر |
|---|---|
| تتفاوت ارتفاعات البطاقات في الشبكة الواحدة | فتبدو غير مرتبة ويصعب المسح البصري. |
| تكون البطاقة قابلة للنقر ولا تحمل زرًا إجرائيًا ظاهرًا | فلا يعلم المستخدم أنها إجراء. |
| تُجعل البطاقة كلها رابطًا واحدًا | فيتعذّر الوصول إلى الروابط داخلها. |
| تُعرض صورة البطاقة دون نص بديل | فتغيب عن قارئ الشاشة. |
| تُقصّ نصوص البطاقات دون بيان أنها مقصوصة | فتُقرأ ناقصة. |
| عنصر يطابق الشكل بصريًا دون أي من إشارات مكتبة كود المنصات، وهو مؤشر على بناء يدوي منفصل عن المكتبة | فلا تصل إليه تحديثاتها. |
| غياب مؤشر تركيز مرئي واضح عند التنقل بلوحة المفاتيح | |
| مساحة لمس دون ٤٤ بكسل في العناصر التفاعلية | |
استخدام عنصر غير دلالي مكان العنصر الصحيح، مثل div بدل button |
كيف يُعالَج
- وحّدوا ارتفاع البطاقات بضبط طول المحتوى لا بقص النص بعد عرضه.
- أضيفوا زرًا إجرائيًا لكل بطاقة قابلة للنقر.
- اجعلوا الرابط على عنوان البطاقة لا على البطاقة كلها.
- أضيفوا نصًا بديلًا لكل صورة، أو علّموها زخرفية إن كانت كذلك.
- بيّنوا قص النص بعلامة ظاهرة، أو اختصروه من المصدر.
معايير متصلة
وفي الدليل: خطوات تطبيق كود المنصات · البطاقة من أول ما يُعاد بناؤه حين تُعتمد المكتبة
لم تطبّقه أي من ٢٦ منصة حكومية مقيسة
- ٣ منصات
- ٢ منصتان
- ٢ منصتان
- ٢ منصتان
- ٢ منصتان
والقياس على عيّنة من المنصات المنشورة للعموم بالمنهجية نفسها المنشورة في صفحة المنهجية.
أين تقف منصتكم من هذا المعيار؟
يصدر الفحص تقديرًا استرشاديًا خلال دقائق، ويبيّن لكل ملاحظة قيمتها المرصودة والمتوقعة وموضعها.