النموذج هو عنصر يسمح للمستخدم بتقديم بيانات في حقل أو مجموعة من الحقول. يمكن أن تكون النماذج بسيطة مثل حقل واحد أو معقدة مثل عنصر نموذج متعدد الخطوات مع حقول متعددة في كل صفحة، والتحقق من صحة الإدخال، وأحيانًا اختبار 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) له. بشكل أكثر عمومية، تجعل سمات الإكمال التلقائي
ملء النماذج أسهل وأسرع. ويكون هذا مفيدًا بشكل خاص للأشخاص الذين يعانون من اضطرابات الإدراك والقراءة وأولئك الذين يستخدمون التقنيات المساعدة (ATs)، مثل قارئات الشاشة.
<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>
بالإضافة إلى ذلك، يجب تجميع حقول النموذج ذي الصلة، مثل العنوان البريدي، آليًا وبشكل مرئي. تتمثل إحدى الطرق في استخدام نمط مجموعة الحقول/التسمية التوضيحية لتجميع العناصر المتشابهة.
الأوصاف
تشبه أوصاف الحقول التسميات في الغرض من حيث أنها تُستخدم لتقديم المزيد من السياق للحقل والمتطلبات. لا تكون أوصاف الحقول مطلوبة لإمكانية الوصول إذا كانت التسميات أو تعليمات النموذج وصفية بما يكفي.
ومع ذلك، هناك مواقف تكون فيها إضافة معلومات إضافية مفيدة لتجنُّب أخطاء النموذج، مثل نقل معلومات عن الحد الأدنى لطول الإدخال في حقل كلمة المرور أو إخبار المستخدم بتنسيق التقويم الذي يجب استخدامه (مثل MM-DD-YYYY).
هناك العديد من الطرق المختلفة التي يمكنك استخدامها لإضافة
أوصاف الحقول إلى نماذجك. ومن أفضل الطرق إضافة السمة
aria-describedby
إلى عنصر النموذج
إلى جانب العنصر <label>. سيقرأ قارئ الشاشة
الوصف والتسمية.
إذا أضفت السمة
aria-labelledby
إلى عنصرك، ستلغي قيمة السمة النص داخل
<label>. كما هو الحال دائمًا، تأكد من اختبار الرمز النهائي مع جميع أنظمة التقنية المساعدة
التي تخطط لدعمها.
الأخطاء
عند إنشاء نماذج يمكن الوصول إليها، هناك الكثير الذي يمكنك فعله لمنع المستخدمين من ارتكاب أخطاء في النماذج. في وقت سابق من هذه الوحدة، تناولنا حقول الترميز بوضوح، وإنشاء تسميات تعريفية، وإضافة أوصاف تفصيلية كلما أمكن ذلك. ولكن بغض النظر عن مدى وضوح النموذج الذي تقدمه، فإن المستخدم سيرتكب خطأ في النهاية.
عندما يواجه مستخدم خطأً في النموذج، تتمثل الخطوة الأولى في الإبلاغ عن الخطأ. يجب تحديد الحقل الذي حدث فيه الخطأ بوضوح، ويجب وصف الخطأ نفسه للمستخدم في نص.
تتوفر طرق مختلفة لعرض رسائل الخطأ، مثل:
- نافذة منبثقة، يتم تضمينها بالقرب من مكان حدوث الخطأ
- مجموعة من الأخطاء مجمّعة في رسالة واحدة أكبر حجمًا في أعلى الصفحة
واحرص على التركيز على لوحة المفاتيح وخيارات مناطق ARIA المباشرة عند الإعلان عن الأخطاء.
كلما أمكن، قدِّم للمستخدم اقتراحًا تفصيليًا حول كيفية إصلاح الخطأ. تتوفّر سمتان لإشعار المستخدمين بالأخطاء.
- يمكنك استخدام سمة HTML المطلوبة. وسيعرض المتصفِّح رسالة خطأ عامة استنادًا إلى مَعلمات التحقّق المعروضة.
- أو يمكنك استخدام السمة aria-required لمشاركة رسالة خطأ مخصّصة مع أنظمة المساعدة الآلية. لن تتلقى الرسالة إلا في حال إضافة رمز إضافي لجعل الرسالة مرئية لجميع المستخدمين.
عندما يعتقد المستخدم أنه قد تم حل جميع الأخطاء، اسمح له بإعادة إرسال النموذج وتقديم ملاحظات حول نتائج الإرسال. تخبر رسالة الخطأ المستخدم أن لديه المزيد من التحديثات التي يجب إجراؤها، في حين تؤكد رسالة النجاح أنه قد حل جميع الأخطاء وأرسل النموذج بنجاح.
التحقّق من استيعابك
اختبر معلوماتك عن النماذج التي يمكن الوصول إليها
أي من الإجابات أدناه هو أسهل إدخال للنموذج؟
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>