حول علامة الإلزامية في نماذج الإدخال

Mon, 14 Jul 2025 13:47:51 +0900

لقد قمنا بتلخيص المعلومات حول علامة “مطلوب” أو الإلزامية في واجهات المستخدم (النماذج) في الخارج، مع مواد توجيهية لواجهة المستخدم.

📌 علامات الإلزامية الرئيسية وأفضل الممارسات

استخدام علامة النجمة (*)
- هو الأكثر شيوعًا وانتشارًا، حيث يتم وضع “*” على الحقول المطلوبة.
- ومع ذلك، من الضروري وجود شرح في بداية النموذج مثل “ حقل مطلوب”* (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، وما إلى ذلك. لا تتردد في استشارتنا!

تجربة المستخدم on kenji.blog

حول علامة الإلزامية في نماذج الإدخال

📌 علامات الإلزامية الرئيسية وأفضل الممارسات

✅ ملخص مواد توجيهات واجهة المستخدم

✅ النهج الموصى به في التنفيذ

🔗 روابط مرجعية (مواد إرشادات واجهة المستخدم)