ضمان توافق عنصر القائمة المنسدلة مع معايير التصميم الموحد (كود المنصات)
القائمة المنسدلة للاختيار من قائمة طويلة، لا لخيارين اثنين يكفيهما زر اختيار. ويطلب المعيار الشكل المعتمد وحالاته، وألا يُشغَّل إجراء فور الاختيار، إذ يقطع ذلك على من يتنقل بلوحة المفاتيح إكمال اختياره.
وهو من المعايير الأساسية في فئة العناصر من دليل كود المنصات، نظام التصميم الموحد للمملكة، الصادر عن هيئة الحكومة الرقمية.
المعيار في مثال واحد
القائمة المنسدلة، مرة في موضعها ومرة حيث لا تلزم.
كيف تقيس الأداة هذا المعيار
يُقاس هذا المعيار من بنية الصفحة ومن قراءة لقطتها، ولذلك تكون الثقة فيه دون الثقة في القيمة المقروءة مباشرة، ويظهر ذلك في عرض النطاق.
وتشترك معايير العناصر في بنية واحدة: الالتزام بالتصميم الأساسي دون تعديل، ثم الحالات التفاعلية، ثم الحالات السياقية. ويُرصد كذلك العنصر المطابق شكلًا دون أي إشارة إلى مكتبة كود المنصات، إذ يدل ذلك على بناء يدوي منفصل عن المكتبة لا تصله تحديثاتها.
النص الرسمي ونقاط التحقق
يقوم هذا المعيار على ٢ من نقاط التحقق المنشورة في كود المنصات، وهي المرجع عند الحكم عليه.
صفحة هذا المعيار في الموقع الرسمي لكود المنصاتنقاط التحقق، نقطة نقطة
لكل نقطة من نقاط التحقق أدناه إجابة مستقلة: ما تشترطه، وما الذي يجتازها وما الذي يسقط فيها، وكيف تُقاس أو يُتحقق منها، وكيف تُعالَج. ولكل نقطة رابط مباشر يمكن مشاركته.
القائمة المنسدلة: مطابقة الشكل مع رخصة زيادة الخيارات
مقيس آليًاDGA-013-aتشترط هذه النقطة استعمال القائمة المنسدلة كما اعتُمدت في كود المنصات شكلًا وحوافًا ولونًا ومسافات، مع رخصة واحدة صريحة: زيادة عناصر خيارات القائمة. فالتوسعة في الخيارات مباحة، والتوسعة في التصميم ممنوعة.
تقيس الأداة هذه النقطة آليًا، وترفق القيمة المرصودة والقيمة المتوقعة معًا.
ما الذي يجتازها: قائمة مستدعاة من المكتبة، خياراتها بأي عدد تحتاجه الجهة، وتصميمها كما هو.
ما الذي يسقط فيها: قائمة أعيد بناؤها بارتفاع صف مختلف أو حواف خاصة، أو قائمة مبنية على مكوّن طرف ثالث بتنسيقه الأصلي.
كيف تُقاس أو يُتحقق منها: تُقرأ خصائص القائمة المطبَّقة وتُقارن بقيم المكتبة. والقائمة المبنية بعناصر غير دلالية تُرصد بطبقة الكشف البنيوية عند غياب العنصر الدلالي.
كيف تُعالَج: استدعوا القائمة من المكتبة وزيدوا خياراتها كما تشاؤون، ولا تعدّلوا صفوفها ولا حوافها.
نقاط متصلة:القائمة المنسدلة: الحالات التفاعلية (Default · Hovered · Pressed · Focused · Read-only · Disabled) ·القائمة: مطابقة الشكل والحواف واللون والمسافات ·حقل المدخلات: مطابقة الشكل والحواف واللون والمسافات
القائمة المنسدلة: الحالات التفاعلية (Default · Hovered · Pressed · Focused · Read-only · Disabled)
يتحقق منه فريقكمDGA-013-bتشترط هذه النقطة أن يحمل القائمة المنسدلة حالاته التفاعلية المعتمدة كاملة (Default · Hovered · Pressed · Focused · Read-only · Disabled) بالقيم المنصوص عليها في كود المنصات. وغياب حالة واحدة منها يمنع بلوغ التطبيق الكلي في المعيار.
لا تُقاس هذه النقطة آليًا، فحكمها يقتضي تفاعلًا مع الصفحة، وأخلاقيات الزحف تمنع التفاعل مع منصات الجهات.
ما الذي يجتازها: القائمة تعرض حالاتها الست، وحالتا القراءة فقط والتعطيل متمايزتان بصريًا لا باللون وحده.
ما الذي يسقط فيها: حالة التعطيل تُعرَض بخفض العتامة وحدها، فتنخفض معها نسبة التباين دون الحد المطلوب ويصير النص غير مقروء.
كيف تُقاس أو يُتحقق منها: حالات التمرير والضغط والتركيز والتعطيل لا تُقرأ من صفحة ساكنة، فهي تحتاج تفاعلًا مع العنصر، وأخلاقيات الزحف تمنع التفاعل مع منصات الجهات. تحققوا منها بلوحة المفاتيح وحدها: انتقلوا إلى العنصر وارصدوا مؤشر التركيز، ثم مرّوا عليه بالمؤشر وارصدوا تغيّر الحالة.
كيف تُعالَج: ميّزوا التعطيل بلون معتمد لا بالعتامة، فالعتامة تضرب التباين وتخالف معيار الألوان في الوقت نفسه.
نقاط متصلة:القائمة المنسدلة: مطابقة الشكل مع رخصة زيادة الخيارات ·حقل المدخلات: الحالات التفاعلية (Default · Hovered · Pressed · Focused · Read-only · Disabled) ·التباين على الخلفيات الملونة وخاصية On Color
كيف تتحققون منه يدويًا
وهذه خطوات المراجعة الكاملة للمعيار، وبعضها أوسع مما تغطيه القاعدة الآلية اليوم.
- عُدّوا خيارات كل قائمة منسدلة: الخياران اثنان يكفيهما زر اختيار، واستعمال القائمة لهما مخالفة استعمال لا مخالفة شكل
- افحصوا الوسم:
selectأصلية أم بناء يدوي منdiv. والبناء اليدوي يكسر التنقل بلوحة المفاتيح غالبًا - اختاروا خيارًا وانظروا هل يُشغَّل إجراء فورًا. التشغيل الفوري يقطع على من يتنقل بلوحة المفاتيح إكمال اختياره
- قارنوا شكل الحقول بين صفحات المنصة، فاختلافها بين صفحة وأخرى مخالفة اتساق
- تنقّلوا إلى القائمة بلوحة المفاتيح وافتحوها بها، وتحققوا من ظهور مؤشر التركيز على الخيار المحدد
أخطاء شائعة في هذا المعيار
| الخطأ | لماذا يضر |
|---|---|
| استخدامها لخيارين فقط | |
| تشغيل إجراء فوري عند الاختيار (يكسر إتاحة الوصول) | |
| اختلاف شكل الحقول بين الصفحات | |
| عنصر يطابق الشكل بصريًا دون أي من إشارات مكتبة كود المنصات، وهو مؤشر على بناء يدوي منفصل عن المكتبة | فلا تصل إليه تحديثاتها. |
| غياب مؤشر تركيز مرئي واضح عند التنقل بلوحة المفاتيح | |
| مساحة لمس دون ٤٤ بكسل في العناصر التفاعلية | |
استخدام عنصر غير دلالي مكان العنصر الصحيح، مثل div بدل button |
كيف يُعالَج
- استبدلوا القوائم ذات الخيارين بأزرار اختيار، فذلك يصحح الاستعمال والشكل معًا
- افصلوا الاختيار عن التشغيل: يختار المستخدم ثم يؤكد بزر، ولا يُشغَّل الإجراء بمجرد الاختيار
- وحّدوا الحقول عبر المنصة باستدعائها من المكتبة، لا بضبط كل صفحة على حدة
- افحصوا الحالات الست يدويًا، ومنها Read-only التي تُنسى عادةً في هذا العنصر تحديدًا
معايير متصلة
وفي الدليل: أزرار كود المنصات: المواصفة والحالات وأكثر المخالفات تكرارًا · القائمة المنسدلة تتبع منطق مطابقة المكوّن نفسه
لم تطبّقه أي من ٢٥ منصة حكومية مقيسة
- ٤ منصات
- ٢ منصتان
- ٢ منصتان
- ٢ منصتان
- ١ منصة
والقياس على عيّنة من المنصات المنشورة للعموم بالمنهجية نفسها المنشورة في صفحة المنهجية.
أين تقف منصتكم من هذا المعيار؟
يصدر الفحص تقديرًا استرشاديًا خلال دقائق، ويبيّن لكل ملاحظة قيمتها المرصودة والمتوقعة وموضعها.