النموذج الذي تنشئه مخصص للأشخاص. يستخدم الأشخاص أجهزة مختلفة. ويستخدم البعض ماوس، والآخر جهاز يعمل باللمس، والبعض الآخر لوحة المفاتيح، والبعض الآخر يتم التحكّم في حركات العينين. ويستخدم بعضها قارئ شاشة، والبعض الآخر يستخدم شاشة صغيرة، والبعض يستخدم برامج تكبير النص. يريد الجميع استخدام نموذجك. تعرَّف على كيفية جعل النموذج سهل الوصول إليه واستخدامه للجميع.
التأكد من فهم المستخدمين للغرض من حقل النموذج
هناك العديد من عناصر التحكّم في النموذج التي يمكنك الاختيار من بينها.
ما القاسم المشترك بينهم؟
يجب أن يحتوي كل عنصر تحكّم في النموذج على عنصر <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%. اختبر نماذجك دائمًا على منصات مختلفة، خاصة الأجهزة أو الإعدادات التي لا تستخدمها كل يوم. هل تعرف شخصًا يستخدم قارئ شاشة، أو شخصًا يستخدم برنامج تكبير النص؟ اطلب منهم ملء نموذجك. تعد مراجعات إمكانية الوصول رائعة، والاختبار مع مستخدمين حقيقيين أفضل.
تعرَّف على مزيد من المعلومات حول إجراء مراجعة لتسهيل الاستخدام وكيفية الاختبار مع مستخدمين حقيقيين.