النموذج هو عنصر يتيح للمستخدم تقديم بيانات في حقل أو مجموعة من الحقول. يمكن أن تكون النماذج بسيطة مثل حقل واحد أو معقدة مثل عنصر نموذج متعدد الخطوات مع حقول متعددة في كل صفحة، والتحقق من صحة الإدخال، وفي بعض الأحيان اختبار CAPTCHA.
تُعد النماذج من أصعب العناصر التي يجب إتقانها من منظور تسهيل الاستخدام، لأنّها تتطلّب معرفة بجميع العناصر التي تناولناها سابقًا، بالإضافة إلى قواعد إضافية خاصة بالنماذج فقط. وببعض المعرفة والوقت، يمكنك إنشاء نموذج يسهل استخدامه ويناسبك ويناسب المستخدمين.
"نماذج Google" هي آخر وحدة خاصة بالمكوّنات في هذه الدورة التدريبية. ستركّز هذه الوحدة على الإرشادات الخاصة بالنماذج، ولكن تنطبق أيضًا جميع الإرشادات الأخرى التي تعرّفت عليها في الوحدات السابقة، مثل بنية المحتوى وتركيز لوحة المفاتيح وتباين الألوان، على عناصر النماذج.
الحقول
تشكّل الحقول أساس النماذج. الحقول هي أنماط تفاعلية صغيرة، مثل عنصر إدخال أو زر اختيار، تتيح للمستخدمين إدخال محتوى أو اتخاذ قرار. تتوفّر مجموعة كبيرة من حقول النماذج التي يمكنك الاختيار من بينها.
ننصح بشكل تلقائي باستخدام أنماط 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>. وكالعادة، احرص على اختبار الرمز النهائي باستخدام جميع تقنيات AT التي تنوي توفيرها.
الأخطاء
عند إنشاء نماذج سهلة الاستخدام، يمكنك اتّخاذ العديد من الإجراءات لمنع المستخدمين من ارتكاب أخطاء في النماذج. في وقت سابق من هذه الوحدة، تناولنا موضوع وضع علامات واضحة على الحقول وإنشاء تصنيفات تعريفية وإضافة أوصاف تفصيلية كلما أمكن ذلك. ولكن مهما بدا نموذجك واضحًا، سيقع المستخدم في خطأ في النهاية.
عندما يواجه المستخدم خطأ في النموذج، تكون الخطوة الأولى هي إعلامه بالخطأ. يجب تحديد الحقل الذي حدث فيه الخطأ بوضوح، كما يجب وصف الخطأ للمستخدم نصيًا.
تتوفّر طرق مختلفة لعرض رسائل الخطأ، مثل:
- نافذة مشروطة مضمّنة بالقرب من مكان حدوث الخطأ
- مجموعة من الأخطاء مجمّعة في رسالة واحدة أكبر في أعلى الصفحة
احرص على الانتباه إلى تركيز لوحة المفاتيح وخيارات محتوى ARIA الديناميكي المتغيّر عند الإعلان عن الأخطاء.
قدِّم للمستخدم اقتراحًا مفصّلاً حول كيفية حلّ الخطأ كلما أمكن ذلك. تتوفّر سمتان لإعلام المستخدمين بالأخطاء.
- يمكنك استخدام سمة HTML required. سيقدّم المتصفّح رسالة خطأ عامة استنادًا إلى مَعلمات التحقّق من صحة الحقل.
- أو يمكنك استخدام السمة aria-required لمشاركة رسالة خطأ مخصّصة مع التقنيات المساعدة. لن يتلقّى الرسالة سوى مستخدمي AT، ما لم تُضِف رمزًا إضافيًا لجعل الرسالة مرئية لجميع المستخدمين.
بعد أن يعتقد المستخدم أنّه تم حلّ جميع الأخطاء، اسمح له بإعادة إرسال النموذج وتقديم ملاحظات حول نتائج عملية الإرسال. تُعلم رسالة الخطأ المستخدم بأنّه عليه إجراء المزيد من التعديلات، بينما تؤكّد رسالة النجاح أنّه قد حلّ جميع الأخطاء وأرسل النموذج بنجاح.
معايير نجاح إضافية
قدّمت إرشادات WCAG 2.2 معايير النجاح التالية التي تركّز على توفير تجارب نماذج أكثر سهولة في الاستخدام: