النموذج هو عنصر يسمح للمستخدم بتقديم بيانات في حقل أو مجموعة من الحقول. يمكن أن تكون النماذج بسيطة مثل حقل واحد أو معقدة مثل عنصر نموذج متعدد الخطوات مع عدة حقول لكل صفحة والتحقق من صحة الإدخال أحيانًا اختبار CAPTCHA.
تُعدّ النماذج من أصعب العناصر التي يمكن الحصول عليها مباشرةً من منظور سهولة الوصول، لأنها تتطلب معرفة جميع العناصر التي التي سبق أن تناولناها، بالإضافة إلى قواعد إضافية خاصة بالنماذج فقط. مع بعض الفهم والوقت، يمكنك إنشاء نموذج يسهل الوصول إليه يناسبك أنت المستخدمين.
النماذج هي الوحدة الأخيرة الخاصة بالمكونات في هذه الدورة. ستخضع هذه الوحدة على الإرشادات الخاصة بالنموذج، ولكن جميع الإرشادات الأخرى التي تعلمتها عنها في الوحدات السابقة، مثل بنية المحتوى تركيز لوحة المفاتيح تباين الألوان، ويسري أيضًا على الشكل عناصر.
الحقول
الحقول هي العمود الفقري للنماذج. تُعد الحقول أنماط تفاعلية صغيرة، مثل عنصر إدخال أو زر اختيار يتيح للمستخدمين إدخال محتوى أو خِيَار. هناك مجموعة متنوعة من حقول النماذج يمكنك الاختيار من بينها.
والاقتراح التلقائي هو استخدام أنماط HTML ثابتة بدلاً من وإنشاء شيء مخصص باستخدام ARIA، مثل بعض الميزات تكون الوظائف - مثل حالات الحقول والخصائص والقيم - بطبيعتها مضمّنة في عناصر HTML، بينما عليك إضافة ARIA المخصّص يدويًا
ARIA
<div role="form" id="sundae-order-form"> <!-- form content --> </div>
HTML
<form id="sundae-order-form"> <!-- form content --> </form>
بالإضافة إلى اختيار أنماط حقول النموذج الأكثر سهولة، حيث المناسبة، فيجب عليك أيضًا إضافة سمات الإكمال التلقائي بتنسيق HTML إلى مجالاتك. تتيح إضافة سمات الإكمال التلقائي معلومات أكثر دقة تعريف الغرض أو تحديده إلى وكلاء المستخدم والتكنولوجيات المساعدة (AT).
تسمح سمات الإكمال التلقائي للمستخدمين بتخصيص العروض التقديمية المرئية
مثل عرض رمز كعكة عيد الميلاد في حقل مع الإكمال التلقائي لذكرى عيد الميلاد
(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 المطلوبة. سيقدّم المتصفّح رسالة خطأ عامة استنادًا إلى مَعلمات التحقّق التي تم تقديمها.
- أو يمكنك استخدام السمة aria-required لمشاركة رسالة خطأ مخصّصة مع ATs. سيتلقّى فريق الدعم الفني (ATs) فقط الرسالة ما لم يتم إدراج رمز إضافي لجعل الرسالة مرئية لجميع المستخدمين.
بمجرد أن يعتقد المستخدم أنه قد تم حل جميع الأخطاء، اسمح له بإعادة الإرسال النموذج وتقديم ملاحظات حول نتائج التقديم. حدث خطأ. تخبر المستخدم أن لديه المزيد من التحديثات التي ينبغي إجراؤها، بينما تخبر رسالة النجاح أنّه تم حلّ جميع الأخطاء وتم إرسال النموذج بنجاح.
التحقق من فهمك
اختبر معلوماتك حول النماذج التي يمكن الوصول إليها
أي من الإجابات أدناه هي أكثر إدخال نموذج يسهل الوصول إليه؟
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>