النموذج الذي تصممه مخصص للأشخاص. يستخدم الأشخاص أجهزة مختلفة. فبعضهم يستخدم الماوس والبعض الآخر جهاز يعمل باللمس والبعض الآخر يستخدم لوحة المفاتيح، وبعض الأجهزة يتم التحكم فيها من خلال حركات العين. يستخدم البعض قارئ الشاشة والبعض الآخر على شاشة صغيرة والبعض الآخر يستخدم برنامج تكبير النص. يريد الجميع استخدام النموذج. تعرَّف على كيفية إتاحة النموذج واستخدامه للجميع.
التأكد من فهم المستخدمين للغرض من حقل النموذج
هناك العديد من عناصر التحكّم في النماذج التي يمكنك الاختيار من بينها.
ما القاسم المشترك بينهم جميعًا؟
يجب أن يكون لكل عنصر تحكّم في النموذج عنصر <label> مرتبط.
يصف العنصر <label> الغرض من عنصر التحكم في النموذج.
يرتبط النص <label> بصريًا بعنصر التحكم في النموذج، وتتم قراءته بواسطة برامج قراءة الشاشة.
بالإضافة إلى ذلك، يؤدي النقر على <label> إلى تركيز عنصر التحكّم المرتبط بالنموذج.
مما يجعله هدفًا أكبر.
استخدام ترميز HTML المفيد للوصول إلى ميزات المتصفّح المضمّنة
من الناحية النظرية، يمكنك إنشاء نموذج باستخدام عناصر <div> فقط.
ويمكنك أيضًا جعلها تبدو وكأنها أصلية من النوع <form>.
ما المشكلة في استخدام
غير دلالية؟
توفر عناصر النموذج المضمنة الكثير من الميزات المضمنة. لنلقِ نظرة على مثال ما.
من الناحية المرئية، تظهر عناصر <input> (الأول في المثال) و<div> بالشكل نفسه.
ويمكنك أيضًا إدراج نص لكلٍّ منهما، لأنّ السمة <div> تحتوي على
contenteditable.
هناك الكثير من الاختلافات بين استخدام عنصر <input> مناسب و<div>.
يشبه <input>.
إذا لم يتعرّف مستخدم قارئ الشاشة على <div> كعنصر إدخال،
ولم يتمكن من إكمال النموذج
كل ما يسمعه قارئ الشاشة هو "Name" (الاسم)،
بدون إشارة إلى أن العنصر هو عنصر تحكم في النموذج لإضافة نص.
لا يؤدي النقر على <div>Name</div> إلى التركيز على <div> المصاحب لها، بينما لا يؤدي النقر على <label>
يتم ربط <input> باستخدام السمتين for وid.
بعد إرسال النموذج، لا يتضمّن الطلب البيانات التي تم إدخالها في <div>.
وعلى الرغم من إمكانية إرفاق البيانات باستخدام JavaScript،
ويتم ذلك تلقائيًا باستخدام <input>.
تحتوي عناصر النموذج المدمجة على ميزات أخرى.
على سبيل المثال، باستخدام عناصر النموذج المناسبة بالإضافة إلى inputmode أو type الصحيح،
لوحة المفاتيح على الشاشة الأحرف المناسبة. استخدام السمة inputmode على <div>
لا يمكنك القيام بذلك.
التأكّد من أنّ المستخدمين على دراية بتنسيق البيانات المتوقّع
يمكنك تحديد قواعد تحقُّق متنوعة لعنصر تحكُّم في النموذج.
على سبيل المثال، لنفترض أن حقل النموذج يجب أن يحتوي دائمًا على ثمانية أحرف على الأقل.
يمكنك استخدام السمة minlength، مع الإشارة إلى قاعدة التحقّق للمتصفّحات.
كيف يمكنك التأكد من أن المستخدمين على علم أيضًا بقاعدة التحقق؟ أخبرهم.
يمكنك إضافة معلومات عن التنسيق المتوقّع أسفل عنصر التحكّم في النموذج مباشرةً.
لتوضيح الأجهزة المساعِدة،
استخدِم السمة aria-describedby في عنصر التحكّم في النموذج
وعلامة id في رسالة الخطأ بالقيمة نفسها، لربطهما معًا.
مساعدة المستخدمين في العثور على رسالة الخطأ الخاصة بعنصر تحكّم في النموذج
في وحدة سابقة عن التحقق من الصحة، تعلمت كيفية إظهار رسائل الخطأ في حالة إدخال بيانات غير صالح.
<label for="name">Name</label>
<input type="text" name="name" id="name" required>
على سبيل المثال، إذا كان أحد الحقول يحتوي على السمة required وتم إدخال بيانات غير صالحة، سيعرض المتصفّح.
رسالة خطأ بجانب عنصر التحكّم في النموذج عند إرسال النموذج. وتُطلعك برامج قراءة الشاشة أيضًا على رسالة الخطأ.
يمكنك أيضًا تعريف رسالة الخطأ الخاصة بك:
يحتاج هذا المثال إلى مزيد من التغييرات لربط رسالة الخطأ بعنصر التحكم في النموذج.
هناك طريقة بسيطة وهي استخدام aria-describedby
على عنصر التحكم في النموذج الذي يطابق id في عنصر رسالة الخطأ.
بعد ذلك، استخدِم aria-live="assertive" لرسالة الخطأ.
تُعلن المناطق المباشرة في ARIA عن حدوث خطأ لمستخدمي قارئ الشاشة عند ظهور الخطأ.
وتكمن مشكلة هذا المنهج في النماذج ذات الحقول المتعددة،
هي أنّ aria-live لن يُعلن عادةً إلا عن أول خطأ في حال حدوث أخطاء متعددة.
كما هو موضح في هذه المقالة حول إشعارات aria-live متعددة بشأن الإجراء نفسه، يمكنك إنشاء رسالة واحدة من خلال سلسلة جميع الأخطاء. هناك نهج آخر وهو الإعلان عن وجود أخطاء، ثم الإعلان عن أخطاء فردية عند التركيز على الحقل.
التأكّد من تعرُّف المستخدمين على الأخطاء
أحيانًا يقوم المصممون بتلوين الحالة غير الصالحة باللون الأحمر،
باستخدام الفئة الزائفة :invalid.
ومع ذلك، للإبلاغ عن خطأ أو نجاح،
يجب ألا تعتمد أبدًا على اللون فقط.
بالنسبة للأشخاص المصابين بعمى الألوان الأحمر والأخضر،
الحد الأخضر والأحمر بنفس الشكل تقريبًا.
من المستحيل معرفة ما إذا كانت الرسالة مرتبطة بخطأ أم لا.
بالإضافة إلى اللون، يمكنك استخدام رمز أو إضافة نوع الخطأ قبل رسائل الخطأ.
<span class="error">
<strong>Error:</strong>Please use at least eight characters.
</span>
مساعدة المستخدمين على التنقّل في النموذج
يمكنك تغيير الترتيب المرئي لعناصر التحكم في النموذج باستخدام CSS. انقطاع الاتصال بين الترتيب المرئي والتنقّل بلوحة المفاتيح (ترتيب DOM) يشكّل مشكلة لمستخدمي قارئ الشاشة ولوحة المفاتيح.
مزيد من المعلومات عن كيفية ضمان يتبع الترتيب المرئي على الصفحة طلب DOM.
مساعدة المستخدمين على تحديد عنصر التحكّم في النموذج الذي يتم التركيز عليه حاليًا
استخدام لوحة المفاتيح للتنقل
هذا النموذج.
هل أدركت أن نمط عناصر التحكم في النموذج تغير بمجرد تنشيطها؟
هذا هو نمط التركيز التلقائي.
يمكنك تجاوزه باستخدام
:focus فئة CSS الزائفة.
مهما كانت الأنماط التي تستخدمها في :focus،
تأكد دائمًا من إمكانية التعرف على الفرق المرئي بين الحالة الافتراضية وحالة التركيز.
مزيد من المعلومات حول تصميم مؤشرات التركيز.
التأكّد من سهولة استخدام النموذج
يمكنك تحديد العديد من المشاكل الشائعة من خلال ملء النموذج بأجهزة مختلفة. استخدم لوحة المفاتيح فقط، واستخدم قارئ شاشة (مثل NVDA على نظام التشغيل Windows أو VoiceOver على نظام التشغيل Mac)، أو تكبير/تصغير الصفحة بنسبة 200%. اختبار النماذج على منصات مختلفة دائمًا وخاصةً الأجهزة أو الإعدادات التي لا تستخدمها يوميًا. هل تعرف شخصًا يستخدم قارئ شاشة، أو شخص يستخدم برنامج تكبير النص؟ اطلب منهم ملء النموذج. تعتبر مراجعات إمكانية الوصول رائعة، ويكون الاختبار مع مستخدمين حقيقيين أفضل.
مزيد من المعلومات حول إجراء مراجعة لتسهيل الاستخدام وكيفية اختبارها مع مستخدمين حقيقيين.