ضمان أن عنصر زر الاختيار يتبع النظام التصميمي الموحد (كود المنصات)
زر الاختيار لاختيار قيمة واحدة من مجموعة متنافية. ويطلب المعيار الشكل المعتمد وحالاته، وتجميع الأزرار مجموعةً واحدة لها عنوان يصلها ببعضها.
وهو من المعايير الأساسية في فئة العناصر من دليل كود المنصات، نظام التصميم الموحد للمملكة، الصادر عن هيئة الحكومة الرقمية.
كيف تقيس الأداة هذا المعيار
تُقرأ القيمة المطبَّقة من الصفحة وتُقارن بالقيمة المعتمدة في كود المنصات، فيصدر الحكم عن قياس لا عن تقدير، وتُرفق القيمة المرصودة والقيمة المتوقعة معًا.
وتشترك معايير العناصر في بنية واحدة: الالتزام بالتصميم الأساسي دون تعديل، ثم الحالات التفاعلية، ثم الحالات السياقية. ويُرصد كذلك العنصر المطابق شكلًا دون أي إشارة إلى مكتبة كود المنصات، إذ يدل ذلك على بناء يدوي منفصل عن المكتبة لا تصله تحديثاتها.
النص الرسمي ونقاط التحقق
يقوم هذا المعيار على ٣ من نقاط التحقق المنشورة في كود المنصات، وهي المرجع عند الحكم عليه.
صفحة هذا المعيار في الموقع الرسمي لكود المنصاتنقاط التحقق، نقطة نقطة
لكل نقطة من نقاط التحقق أدناه إجابة مستقلة: ما تشترطه، وما الذي يجتازها وما الذي يسقط فيها، وكيف تُقاس أو يُتحقق منها، وكيف تُعالَج. ولكل نقطة رابط مباشر يمكن مشاركته.
زر الاختيار: مطابقة الشكل والحواف واللون والمسافات
مقيس آليًاDGA-022-aتشترط هذه النقطة استدعاء زر الاختيار من مكتبة كود المنصات واستعماله بخصائصه المعتمدة دون تعديل على تصميمه الأساسي، وأخصّها هنا قطره ودائرته الداخلية ومسافته من تسميته وتباعد خيارات مجموعته. وتعديل أي منها يخرج العنصر عن المكتبة ولو بقي شبيهًا بها في المظهر.
تقيس الأداة هذه النقطة آليًا، وترفق القيمة المرصودة والقيمة المتوقعة معًا.
ما الذي يجتازها: أزرار اختيار دلالية في مجموعة واحدة باسم واحد، فتعمل بينها الأسهم تلقائيًا.
ما الذي يسقط فيها: أزرار اختيار كل واحد منها في مجموعة مستقلة، فيمكن اختيار خيارين متناقضين معًا.
كيف تُقاس أو يُتحقق منها: تُرصد أزرار الاختيار الأصلية وما يكافئها من خصائص الوصولية، ثم تُقرأ مجموعاتها.
كيف تُعالَج: وحّدوا اسم المجموعة بين خياراتها، واستدعوا شكل الزر من المكتبة.
نقاط متصلة:زر الاختيار: الحالات التفاعلية (Default · Hovered · Focused · Read-only · Disabled) ·زر الاختيار: الحالات السياقية (Selected / Unselected) ·مربع الاختيار: مطابقة الشكل والحواف واللون والمسافات
زر الاختيار: الحالات التفاعلية (Default · Hovered · Focused · Read-only · Disabled)
يتحقق منه فريقكمDGA-022-bتشترط هذه النقطة أن يحمل زر الاختيار حالاته التفاعلية المعتمدة كاملة (Default · Hovered · Focused · Read-only · Disabled) بالقيم المنصوص عليها في كود المنصات. وغياب حالة واحدة منها يمنع بلوغ التطبيق الكلي في المعيار.
لا تُقاس هذه النقطة آليًا، فحكمها يقتضي تفاعلًا مع الصفحة، وأخلاقيات الزحف تمنع التفاعل مع منصات الجهات.
ما الذي يجتازها: التنقل بالأسهم داخل المجموعة يعمل، ومؤشر التركيز ظاهر على الخيار الجاري.
ما الذي يسقط فيها: أزرار مبنية بعناصر عامة، فيلزم لكل خيار ضغطة تنقل مستقلة بدل الأسهم.
كيف تُقاس أو يُتحقق منها: حالات التمرير والضغط والتركيز والتعطيل لا تُقرأ من صفحة ساكنة، فهي تحتاج تفاعلًا مع العنصر، وأخلاقيات الزحف تمنع التفاعل مع منصات الجهات. تحققوا منها بلوحة المفاتيح وحدها: انتقلوا إلى العنصر وارصدوا مؤشر التركيز، ثم مرّوا عليه بالمؤشر وارصدوا تغيّر الحالة.
كيف تُعالَج: ابنوا الأزرار على العنصر الدلالي فتأتي حركة الأسهم دون شفرة، ولا تحذفوا مؤشر التركيز.
نقاط متصلة:زر الاختيار: مطابقة الشكل والحواف واللون والمسافات ·زر الاختيار: الحالات السياقية (Selected / Unselected) ·مربع الاختيار: الحالات التفاعلية (Default · Hovered · Focused · Read-only · Disabled)
زر الاختيار: الحالات السياقية (Selected / Unselected)
يتحقق منه فريقكمDGA-022-cتشترط هذه النقطة أن يعبّر زر الاختيار عن حالته السياقية (Selected / Unselected) بالشكل المعتمد في كود المنصات، وأن تكون الحالة مقروءة برمجيًا لا بصريًا وحدها. وهذه الحالة تظهر عند تحميل الصفحة دون تفاعل، فهي في متناول القياس.
لا تُقاس هذه النقطة آليًا، فحكمها يقتضي تفاعلًا مع الصفحة، وأخلاقيات الزحف تمنع التفاعل مع منصات الجهات.
ما الذي يجتازها: الخيار المختار مقروء برمجيًا، وواحد فقط من كل مجموعة مختار في أي لحظة.
ما الذي يسقط فيها: تمييز الاختيار بلون النص وحده، فلا يصل إلى قارئ الشاشة ولا إلى من لا يميز الألوان.
كيف تُقاس أو يُتحقق منها: تُقرأ حالة الاختيار عند تحميل الصفحة من العنصر نفسه.
كيف تُعالَج: اربطوا الاختيار بحالة العنصر الدلالية لا بصنف تنسيقي، وأضيفوا للتمييز شكلًا إلى جانب اللون.
نقاط متصلة:زر الاختيار: الحالات التفاعلية (Default · Hovered · Focused · Read-only · Disabled) ·مربع الاختيار: الحالات السياقية (Checked / Unchecked / Indeterminate) ·زر الاختيار: مطابقة الشكل والحواف واللون والمسافات
كيف تتحققون منه يدويًا
وهذه خطوات المراجعة الكاملة للمعيار، وبعضها أوسع مما تغطيه القاعدة الآلية اليوم.
- تحققوا من تجميع الأزرار برمجيًا في مجموعة لها عنوان
- تنقّلوا بينها بالأسهم لا بمفتاح الإزاحة، فذلك السلوك المتوقع
- افحصوا الاختيار الافتراضي
- اضغطوا التسمية
أخطاء شائعة في هذا المعيار
| الخطأ | لماذا يضر |
|---|---|
| لا تُجمَّع الأزرار في مجموعة واحدة لها عنوان | فيقرؤها قارئ الشاشة خيارات منفصلة. |
| يغيب الاختيار الافتراضي حيث يكون أحد الخيارات هو الأكثر اختيارًا | فتزيد خطوة على المستخدم. |
| يُستعمل زر الاختيار حيث يمكن اختيار أكثر من قيمة، وموضعه مربع الاختيار | |
| يتعذّر التنقل بين الأزرار بالأسهم | السلوك المتوقع في المجموعة الواحدة. |
| لا ترتبط التسمية بالزر برمجيًا | فتضيع مساحة النقر. |
| عنصر يطابق الشكل بصريًا دون أي من إشارات مكتبة كود المنصات، وهو مؤشر على بناء يدوي منفصل عن المكتبة | فلا تصل إليه تحديثاتها. |
| غياب مؤشر تركيز مرئي واضح عند التنقل بلوحة المفاتيح | |
| مساحة لمس دون ٤٤ بكسل في العناصر التفاعلية | |
استخدام عنصر غير دلالي مكان العنصر الصحيح، مثل div بدل button |
كيف يُعالَج
- جمّعوا الأزرار المتنافية في مجموعة واحدة معنونة ترتبط بها برمجيًا.
- اضبطوا التنقل بالأسهم داخل المجموعة وبمفتاح الإزاحة بين المجموعات.
- حدّدوا خيارًا افتراضيًا حيث كان أحدها هو الأكثر اختيارًا في الاستعمال.
- استبدلوا الأزرار بمربعات اختيار حيث كان الاختيار متعددًا.
- اربطوا كل تسمية بزرها برمجيًا.
معايير متصلة
وفي الدليل: كود المنصات figma · ما الذي يضمه ملف التصميم · حالات زر الاختيار معرّفة في ملف التصميم
لم تطبّقه أي من ١٠ منصات حكومية مقيسة
- ١ منصة
والقياس على عيّنة من المنصات المنشورة للعموم بالمنهجية نفسها المنشورة في صفحة المنهجية.
أين تقف منصتكم من هذا المعيار؟
يصدر الفحص تقديرًا استرشاديًا خلال دقائق، ويبيّن لكل ملاحظة قيمتها المرصودة والمتوقعة وموضعها.