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