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