نماذج

النموذج هو عنصر يسمح للمستخدم بتقديم بيانات في حقل أو مجموعة من الحقول. يمكن أن تكون النماذج بسيطة مثل حقل واحد أو معقّدة مثل عنصر نموذج متعدّد الخطوات يحتوي على حقول متعددة في كل صفحة، وعمليات التحقّق من الإدخال، واختبار CAPTCHA أحيانًا.

تُعد النماذج من أصعب العناصر التي يصعب إتقانها من ناحية سهولة الاستخدام، لأنّها تتطلّب معرفة جميع العناصر التي سبق أن تناولناها، بالإضافة إلى قواعد إضافية خاصة بالنماذج فقط. من خلال بعض الفهم والوقت، يمكنك إنشاء نموذج سهل الاستخدام يناسبك ويناسب مستخدميك.

"النماذج" هي الوحدة الأخيرة الخاصة بالمكوّنات في هذه الدورة التدريبية. ستتمحور هذه الوحدة حول الإرشادات المتعلّقة بالنماذج، ولكن تنطبق أيضًا على عناصر النموذج جميع الإرشادات الأخرى التي تعرّفت عليها في الوحدات السابقة، مثل بنية المحتوى، تركيز لوحة المفاتيح، تباين الألوان.

الحقول

الحقول هي العمود الفقري للنماذج. الحقول هي أنماط تفاعلية صغيرة، مثل عنصر إدخال أو زر اختيار، تسمح للمستخدمين بإدخال محتوى أو تحديد خيار. تتوفّر مجموعة كبيرة من حقول النماذج للاختيار من بينها.

ننصح تلقائيًا باستخدام أنماط HTML راسخة بدلاً من إنشاء عنصر مخصّص باستخدام ARIA، لأنّ ميزات و وظائف معيّنة، مثل حالات الحقول والسمات والقيم، تكون مدمجة بشكلٍ أساسي في عناصر HTML. تتطلّب الحقول المخصّصة منك إضافة ARIA يدويًا.

غير مقترَح: HTML مخصّص مع ARIA

<div role="form" id="sundae-order-form">
  <!-- form content -->
</div>

مُقترَح: HTML العادي

<form id="sundae-order-form">
  <!-- form content -->
</form>

بالإضافة إلى اختيار أنماط حقول النماذج الأكثر سهولة في الاستخدام، يجب أيضًا عند الاقتضاء إضافة سمات الإكمال التلقائي في HTML إلى حقولك. تسمح إضافة سمات الإكمال التلقائي بمزيد من الدقة في تحديد الغرض لمعلّمات المستخدمين والتقنيات المساعِدة.

تسمح سمات الإكمال التلقائي للمستخدمين بتخصيص العروض المرئية، مثل عرض رمز كعكة عيد ميلاد في حقل تمّ إسناد سمة الإكمال التلقائي لعيد الميلاد (bday) إليه. بشكل عام، تجعل سمات الإكمال التلقائي ملء النماذج أسهل وأسرع. ويُعدّ ذلك مفيدًا بشكل خاص للأشخاص الذين يعانون من اضطرابات معرفية وصعوبات في القراءة والذين يستخدمون تكنولوجيات مساعدة، مثل تطبيقات قراءة الشاشة.

<form id="sundae-order-form">
  <p>Name: <input type="name" autocomplete="name"></p>
  <p>Telephone: <input type="tel" autocomplete="tel"></p>
  <p>Email address: <input type="email" autocomplete="email"></p>
</form>

أخيرًا، يجب ألا تُحدث حقول النموذج تغييرات سياقية عند تلقّيها التركيز أو إدخال المستخدم ما لم يتم تحذير المستخدم من السلوك قبل استخدام المكوّن. على سبيل المثال، يجب عدم إرسال النموذج تلقائيًا عندما يتلقّى حقل تركيزًا أو بعد أن يضيف مستخدم محتوى إلى الحقل.

التصنيفات

تُعلِم التصنيفات المستخدم عن الغرض من الحقل، إذا كان الحقل مطلوبًا، ويمكنها أيضًا تقديم معلومات عن متطلبات الحقل، مثل تنسيق الإدخال. يجب أن تكون التصنيفات مرئية في جميع الأوقات وأن تصف بدقة حقل النموذج للمستخدمين.

من المبادئ الأساسية للأشكال السهلة الاستخدام هو إنشاء صلة واضحة و دقيقة بين الحقل وتصنيف الحقل. وينطبق ذلك على مستوى الأداء المرئية والآلي. بدون هذا السياق، قد لا يفهم المستخدم كيفية ملء الحقول في النموذج.

<form id="sundae-order-form">
  <p><label>Name (required): <input type="name" autocomplete="name" required></label></p>
  <p><label>Telephone (required): <input type="tel" autocomplete="tel" required></label></p>
  <p><label>Email address: <input type="email" autocomplete="email"></label></p>
</form>

بالإضافة إلى ذلك، يجب أن يتم تجميع حقول النماذج ذات الصلة، مثل العنوان البريدي، آليًا ومرئية. إحدى الطرق هي استخدام نموذج fieldset و legend لتجميع العناصر المتشابهة.

الأوصاف

تشبه أوصاف الحقول التصنيفات من حيث الغرض، إذ يتم استخدامها لمحاولة تقديم سياق إضافي للحقل والمتطلبات. لا يُشترط استخدام أوصاف الحقول لتوفير ميزات تسهيل الاستخدام إذا كانت التصنيفات أو تعليمات النموذج وصفية بشكلٍ كافٍ.

ومع ذلك، هناك حالات يكون فيها من المفيد إضافة معلومات إضافية لتجنُّب أخطاء النموذج، مثل نقل معلومات عن الحد الأدنى لطول الإدخال في حقل كلمة المرور أو إخبار المستخدم بتنسيق التقويم الذي يجب استخدامه (مثل ‎MM-DD-YYYY).

هناك العديد من الطرق المختلفة التي يمكنك استخدامها لإضافة أوصاف الحقول إلى نماذجك. من أفضل الطرق هي إضافة سمة aria-describedby إلى عنصر النموذج، بالإضافة إلى عنصر <label>. ستقرأ قارئ الشاشة كلًّا من الوصف والعنوان.

في حال إضافة سمة aria-labelledby إلى العنصر، ستحلّ قيمة السمة محلّ النص الوارد في <label>. كما هو الحال دائمًا، احرص على اختبار الرمز النهائي مع جميع تطبيقات الترويج التي تريد إتاحة استخدامها.

الأخطاء

عند إنشاء نماذج يسهل الوصول إليها، هناك الكثير من الإجراءات التي يمكنك اتّخاذها لمنع المستخدمين من ارتكاب أخطاء في النموذج. في وقت سابق من هذه الوحدة، غطّينا تمييز الحقول بوضوح وإنشاء تصنيفات تعريفية وإضافة أوصاف مفصّلة كلما كان ذلك ممكنًا. ولكن مهما كان النموذج واضحًا، سيرتكب أحد المستخدمين خطأً في النهاية.

عندما يواجه المستخدم خطأ في النموذج، تكون الخطوة الأولى هي إعلامه بالخطأ. يجب تحديد الحقل الذي حدث فيه الخطأ بوضوح، ويجب وصف الخطأ نفسه للمستخدم في نص.

هناك طرق مختلفة لعرض رسائل الصعوبات، مثل:

  • نافذة منبثقة مضمّنة بالقرب من مكان حدوث الخطأ
  • مجموعة من الأخطاء المجمّعة في رسالة واحدة أكبر في أعلى الصفحة

احرص على الانتباه إلى تركيز لوحة المفاتيح وخيارات منطقة العرض المباشر في ARIA عند الإعلان عن الأخطاء.

كلما أمكن، قدِّم للمستخدم اقتراحًا مفصّلاً حول كيفية إصلاح الخطأ. تتوفّر سمتان لإشعار المستخدمين بالأخطاء.

  • يمكنك استخدام سمة HTML required. سيقدّم المتصفّح رسالة خطأ عامة استنادًا إلى مَعلمات التحقّق من الحقول.
  • أو يمكنك استخدام السمة aria-required لمشاركة رسالة خطأ مخصّصة مع أدوات التحويل. ستتلقّى حسابات الأنشطة التجارية فقط الرسالة ما لم تضِف رمزًا إضافيًا لعرض الرسالة لجميع المستخدمين.

بعد أن يعتقد المستخدم أنّه تم حلّ جميع الأخطاء، اسمح له بإعادة إرسال النموذج وتقديم ملاحظات حول نتائج عملية الإرسال. تُعلم رسالة الخطأ المستخدم بأنّه عليه إجراء المزيد من التعديلات، في حين تؤكّد رسالة النجاح أنّه قد حلّ جميع الأخطاء وأرسل النموذج بنجاح.

معايير النجاح الإضافية

قدّمت مبادرة WCAG 2.2 معايير النجاح التالية التي تركّز على تجارب استخدام نماذج أكثر سهولة:

التحقّق من فهمك

اختبِر معلوماتك حول النماذج التي يمكن الوصول إليها

أي مما يلي هو إدخال النموذج الأسهل استخدامًا؟

Email address: <input type="email" required>
لا يتوفّر تصنيف يربط "عنوان البريد الإلكتروني" بالقيمة التي تم إدخالها.
<label>Email address: <input type="email" required></label>
لا تتضمّن هذه السمة سمة الإكمال التلقائي التي تقدّم تعريفًا أو تحديدًا للغرض لبرامج وكلاء المستخدمين والتقنيات المساعِدة.
<label>Email address: <input type="email" required autocomplete="email"></label>
هذا هو تصنيف حقل يسهل الوصول إليه، ولكنّه ليس أسهل حقل للوصول إليه في هذه القائمة.
<label>Email address (required): <input type="email" required aria-describedby="email-validation"> <span id="email-validation" class="validation-message">Please provide a valid email address using the format name@place.com</span></label>
تضيف سمة aria-describedby سياقًا إضافيًا إلى خطأ قد يتلقّاه المستخدم في حال ملء الحقل بشكل غير صحيح. على الرغم من أنّ هذه السمة غير مطلوبة، إلا أنّها قد تكون مفيدة لمستخدمي تكنولوجيات المساعدة.