التحقق من استخدام عنصر المدخلات بما يتماشى مع نظام التصميم الموحد (كود المنصات)
حقل الإدخال هو موضع الخطأ الأكثر تكلفة في أي معاملة. ويطلب المعيار الشكل المعتمد وحالاته، وتسمية ظاهرة مرتبطة بالحقل، ورسالة خطأ تقول ما المطلوب لا أن القيمة غير صحيحة.
وهو من المعايير الأساسية في فئة العناصر من دليل كود المنصات، نظام التصميم الموحد للمملكة، الصادر عن هيئة الحكومة الرقمية.
المعيار في مثال واحد
حقل البريد نفسه، مرة كما يطلبه الكود ومرة كما يقع الخطأ غالبًا.
كيف تقيس الأداة هذا المعيار
تُقرأ القيمة المطبَّقة من الصفحة وتُقارن بالقيمة المعتمدة في كود المنصات، فيصدر الحكم عن قياس لا عن تقدير، وتُرفق القيمة المرصودة والقيمة المتوقعة معًا.
وتشترك معايير العناصر في بنية واحدة: الالتزام بالتصميم الأساسي دون تعديل، ثم الحالات التفاعلية، ثم الحالات السياقية. ويُرصد كذلك العنصر المطابق شكلًا دون أي إشارة إلى مكتبة كود المنصات، إذ يدل ذلك على بناء يدوي منفصل عن المكتبة لا تصله تحديثاتها.
النص الرسمي ونقاط التحقق
يقوم هذا المعيار على ٣ من نقاط التحقق المنشورة في كود المنصات، وهي المرجع عند الحكم عليه.
صفحة هذا المعيار في الموقع الرسمي لكود المنصاتنقاط التحقق، نقطة نقطة
لكل نقطة من نقاط التحقق أدناه إجابة مستقلة: ما تشترطه، وما الذي يجتازها وما الذي يسقط فيها، وكيف تُقاس أو يُتحقق منها، وكيف تُعالَج. ولكل نقطة رابط مباشر يمكن مشاركته.
حقل المدخلات: مطابقة الشكل والحواف واللون والمسافات
مقيس آليًاDGA-034-aتشترط هذه النقطة استدعاء حقل المدخلات من مكتبة كود المنصات واستعماله بخصائصه المعتمدة دون تعديل على تصميمه الأساسي، وأخصّها هنا ارتفاعه وحوافه وحشوه وموضع تسميته وأيقوناته الداخلية. وتعديل أي منها يخرج العنصر عن المكتبة ولو بقي شبيهًا بها في المظهر.
تقيس الأداة هذه النقطة آليًا، وترفق القيمة المرصودة والقيمة المتوقعة معًا.
ما الذي يجتازها: حقول مستدعاة من المكتبة، لكل حقل تسمية ظاهرة مرتبطة به برمجيًا.
ما الذي يسقط فيها: حقل بلا تسمية يعوّضها نص تلميح، فتختفي التسمية عند بدء الكتابة ولا يعلم المستخدم ماذا يكتب.
كيف تُقاس أو يُتحقق منها: تُرصد الحقول الأصلية بمحدد دلالي لا يخطئها، وتُقرأ خصائصها وارتباط تسميتها. وحقول الإدخال من العناصر التي لا تفوت الكاشف متى كانت معروضة.
كيف تُعالَج: أضيفوا لكل حقل تسمية ظاهرة مرتبطة به، واستدعوا شكله من المكتبة.
نقاط متصلة:حقل المدخلات: الحالات التفاعلية (Default · Hovered · Pressed · Focused · Read-only · Disabled) ·نصوص التلميح والنصوص المساعدة ورسائل الخطأ في المدخلات ·منطقة النص: مطابقة الشكل والحواف واللون والمسافات
حقل المدخلات: الحالات التفاعلية (Default · Hovered · Pressed · Focused · Read-only · Disabled)
يتحقق منه فريقكمDGA-034-bتشترط هذه النقطة أن يحمل حقل المدخلات حالاته التفاعلية المعتمدة كاملة (Default · Hovered · Pressed · Focused · Read-only · Disabled) بالقيم المنصوص عليها في كود المنصات. وغياب حالة واحدة منها يمنع بلوغ التطبيق الكلي في المعيار.
لا تُقاس هذه النقطة آليًا، فحكمها يقتضي تفاعلًا مع الصفحة، وأخلاقيات الزحف تمنع التفاعل مع منصات الجهات.
ما الذي يجتازها: مؤشر التركيز على الحقل ظاهر بتباين كافٍ، وحالتا القراءة فقط والتعطيل متمايزتان بغير العتامة.
ما الذي يسقط فيها: إلغاء مؤشر التركيز من الحقول كلها في سطر واحد من ملف التنسيق، وهي أكثر مخالفات الحالات تكرارًا وأسهلها إصلاحًا.
كيف تُقاس أو يُتحقق منها: حالات التمرير والضغط والتركيز والتعطيل لا تُقرأ من صفحة ساكنة، فهي تحتاج تفاعلًا مع العنصر، وأخلاقيات الزحف تمنع التفاعل مع منصات الجهات. تحققوا منها بلوحة المفاتيح وحدها: انتقلوا إلى العنصر وارصدوا مؤشر التركيز، ثم مرّوا عليه بالمؤشر وارصدوا تغيّر الحالة.
كيف تُعالَج: أعيدوا مؤشر التركيز واجعلوه أوضح من الافتراضي، وميّزوا التعطيل بلون معتمد.
نقاط متصلة:حقل المدخلات: مطابقة الشكل والحواف واللون والمسافات ·منطقة النص: الحالات التفاعلية (Default · Hovered · Pressed · Focused · Read-only · Disabled) ·الزر: الحالات التفاعلية (Default · Hovered · Pressed · Selected · Focused · Disabled)
نصوص التلميح والنصوص المساعدة ورسائل الخطأ في المدخلات
مقيس آليًاDGA-034-cتشترط هذه النقطة دعم نص التلميح (Placeholder) والنصوص المساعدة بشكل متناسق مع التصميم، مع وضوح رسائل الخطأ وطريقة معالجتها عند الحاجة. والنص المساعد يبقى، ونص التلميح يزول بأول حرف.
تقيس الأداة هذه النقطة آليًا، وترفق القيمة المرصودة والقيمة المتوقعة معًا.
ما الذي يجتازها: نص مساعد ثابت تحت الحقل، ورسالة خطأ مرتبطة بالحقل برمجيًا تسمّي المشكلة وطريقة حلها.
ما الذي يسقط فيها: رسالة خطأ ملونة بالأحمر وحده بلا ارتباط بالحقل، فلا يعرف قارئ الشاشة أي حقل تخصّ.
كيف تُقاس أو يُتحقق منها: يُرصد النص المساعد وارتباط رسالة الخطأ بالحقل بنيويًا. وظهور الرسالة يقتضي إرسال النموذج، وأخلاقيات الزحف تمنع إرسال النماذج على منصات الجهات.
كيف تُعالَج: اربطوا كل رسالة خطأ بحقلها برمجيًا، وانقلوا الشرح من نص التلميح إلى نص مساعد ثابت.
نقاط متصلة:نصوص التلميح والنصوص المساعدة ورسائل الخطأ في منطقة النص ·ثبات نمط عرض الخطأ بصريًا ومكانيًا في السياق الواحد ·حقل المدخلات: مطابقة الشكل والحواف واللون والمسافات
كيف تتحققون منه يدويًا
وهذه خطوات المراجعة الكاملة للمعيار، وبعضها أوسع مما تغطيه القاعدة الآلية اليوم.
- افحصوا وجود تسمية ظاهرة لكل حقل، منفصلة عن
placeholder - افحصوا
aria-invalidوaria-describedbyعند حالة الخطأ - أدخلوا قيمًا غير صالحة واقرأوا كل رسالة
- تحققوا من تعليم الحقول الإلزامية بغير اللون
أخطاء شائعة في هذا المعيار
| الخطأ | لماذا يضر |
|---|---|
| يُستعمل النص التلميحي بديلًا عن التسمية | فيختفي عند الكتابة ويضيع سياق الحقل. |
| تقول رسالة الخطأ إن القيمة غير صحيحة دون أن تقول الصيغة المطلوبة | |
يغيب aria-invalid وaria-describedby | فلا تصل حالة الخطأ ولا رسالته إلى قارئ الشاشة. |
| تُعلَّم الحقول الإلزامية بنجمة حمراء وحدها | دلالة لونية لا يراها الجميع. |
| يُقيَّد الإدخال بصيغة غير مبيّنة | فيُرفض ما يكتبه المستخدم دون سبب ظاهر. |
| عنصر يطابق الشكل بصريًا دون أي من إشارات مكتبة كود المنصات، وهو مؤشر على بناء يدوي منفصل عن المكتبة | فلا تصل إليه تحديثاتها. |
| غياب مؤشر تركيز مرئي واضح عند التنقل بلوحة المفاتيح | |
| مساحة لمس دون ٤٤ بكسل في العناصر التفاعلية | |
استخدام عنصر غير دلالي مكان العنصر الصحيح، مثل div بدل button |
كيف يُعالَج
- أضيفوا تسمية ظاهرة لكل حقل، منفصلة عن النص التلميحي.
- أعيدوا صياغة الرسائل لتقول المطلوب، مثل «أدخلوا بريدًا بالصيغة [email protected]».
- اربطوا رسالة الخطأ بحقلها عبر
aria-describedby، وعلّموا الحقل بـaria-invalid. - علّموا الحقول الإلزامية بنص إلى جانب أي دلالة لونية.
- بيّنوا الصيغة المتوقعة نصًا مساعدًا قبل الإدخال لا بعد رفضه.
معايير متصلة
وفي الدليل: كيف تتحققون من التزام منصتكم بكود المنصات · فحص المدخلات من أول خطوات التحقق
لم تطبّقه أي من ٢٢ منصة حكومية مقيسة
- ٤ منصات
- ٤ منصات
- ٣ منصات
- ٢ منصتان
- ٢ منصتان
والقياس على عيّنة من المنصات المنشورة للعموم بالمنهجية نفسها المنشورة في صفحة المنهجية.
أين تقف منصتكم من هذا المعيار؟
يصدر الفحص تقديرًا استرشاديًا خلال دقائق، ويبيّن لكل ملاحظة قيمتها المرصودة والمتوقعة وموضعها.