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