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