لقد قمنا بتلخيص المعلومات حول علامة “مطلوب” أو الإلزامية في واجهات المستخدم (النماذج) في الخارج، مع مواد توجيهية لواجهة المستخدم.
📌 علامات الإلزامية الرئيسية وأفضل الممارسات
استخدام علامة النجمة (*)
- هو الأكثر شيوعًا وانتشارًا، حيث يتم وضع “*” على الحقول المطلوبة.
- ومع ذلك، من الضروري وجود شرح في بداية النموذج مثل “ حقل مطلوب”* (Nielsen Norman Group, California State University, Northridge).
- هناك أيضًا أمثلة تستخدم الألوان للتأكيد (مثل النص الأحمر).
تحديد “Required” أو “(required)” بوضوح في التسمية
- عن طريق إضافة كلمة “Required” في التسمية (Label)، يمكن توضيح ذلك لقارئات الشاشة، مما يحسن إمكانية الوصول (Deque).
الاستخدام المشترك لسمات ARIA وسمة
requiredفي HTML5- بالإضافة إلى العرض المرئي، باستخدام
aria-required="true"و<input required>، يمكن توصيل الإلزامية برمجيًا (Deque).
- بالإضافة إلى العرض المرئي، باستخدام
استخدام “(optional)” لتحديد الحقول الاختيارية بوضوح
- هناك أيضًا طريقة لتوضيح الحقول الاختيارية باستخدام “(optional)” بدلاً من الحقول المطلوبة، وهي فعالة عند خلط الاثنين.
- ومع ذلك، يشير Nielsen‑Norman إلى أنه “من الأسهل الحكم إذا تم توضيح الإلزامية أيضًا” (TPGi).
✅ ملخص مواد توجيهات واجهة المستخدم
| المصدر | المحتوى |
|---|---|
| NN/g: Marking Required Fields in Forms | يُنصح باستخدام النجمة + نص توضيحي، ويُعتبر عرض الاختياري فقط غير ودي (Nielsen Norman Group). |
| Deque (Anatomy of Accessible Forms) | ・استخدام نص “Required” أو صورة في التسمية. ・تم التصريح بأن الإشارة باللون وحده غير كافية. |
| W3C Techniques (H90) | تضمين النجمة أو “(required)” في التسمية، وتحديد المعنى في بداية النموذج. |
| TPGi (Doing what’s required) | مع مراعاة إمكانية الوصول، تم تقييم إدراج النجمة + سمة ARIA + نص التسمية على أنه الأمثل. |
| دليل Contensis لتجربة مستخدم النماذج | تم تلخيصه بإيجاز بأن وضع العلامات المتسق (* أو (optional)) أمر مهم. |
✅ النهج الموصى به في التنفيذ
إضافة نص توضيحي في بداية النموذج :
Fields marked with * are required. (أو بشكل جماعي “All fields are required”، وإذا كان هناك خيار اختياري “unless marked optional”)
إضافة تسمية (Label) :
- الكتابة مثل
First Name *أوEmail (required).
- الكتابة مثل
سمات ARIA و HTML5 :
1 2<label for="email">Email <abbr title="required">*</abbr></label> <input id="email" required aria-required="true">لا تعتمد على اللون فقط : قم بدعم العرض المرئي والبرمجي معًا.
🔗 روابط مرجعية (مواد إرشادات واجهة المستخدم)
- NN/g: Marking Required Fields in Forms (California State University, Northridge, Nielsen Norman Group, Deque)
- Deque: Anatomy of Accessible Forms (Deque)
- W3C Techniques: H90 Indicating required form controls (W3C)
- TPGi: Indicating mandatory fields accessibly (TPGi)
- Contensis: UX Forms Guidelines (Contensis)
إذا لزم الأمر، يمكننا أيضًا تقديم أمثلة محددة لأكواد HTML/CSS، وقوالب تصميم مكونات واجهة المستخدم لـ Sketch أو Figma، وما إلى ذلك. لا تتردد في استشارتنا!