قائمة تحقق من سهولة استخدام نماذج الأعمال الصغيرة
النموذج المفيد يطلب ما يحتاجه فقط، ويمنح كل حقل تسمية ظاهرة، ويضيف تعليمات حيث لا يكون التنسيق أو القاعدة واضحًا، ويخبر الناس نصيًا أي حقل خاطئ وما الذي يجب تغييره، ويمكن إكماله من البداية حتى الإرسال باستخدام لوحة المفاتيح وحدها. اختبر هذه الأمور الأربعة على نموذجك الفعلي بلوحة المفاتيح وبإدخال مُختلَق، وأصلح أولًا ما يمنع الإكمال.
ابدأ بتقليص النموذج
يشير دليل W3C للنماذج إلى أن الناس، بغض النظر عن الأمور التقنية، يفضلون عادةً النماذج البسيطة والقصيرة. وينصح بطلب ما هو لازم فقط لإتمام المعاملة أو العملية، ويقول إن المستخدمين أكثر ميلًا إلى ترك النموذج عندما تُطلب بيانات غير ذات صلة أو مفرطة. قبل فحص أي شيء آخر، راجع نموذجك حقلًا حقلًا واسأل: ماذا ستخسر لو اختفى هذا الحقل؟
غالبًا ما يحتاج طلب عرض السعر إلى اسم ووسيلة للرد ووصف للعمل. أما العنوان البريدي وحجم الشركة ورقم هاتف ثانٍ فقد تنتمي إلى حديث لاحق.
التسميات والتعليمات
يشترط المعيار WCAG 3.3.2، التسميات أو التعليمات، توفير تسميات أو تعليمات عندما يتطلب المحتوى إدخالًا من المستخدم. ويوضح شرح W3C أن الهدف أن يعرف الناس ما الإدخال المتوقع، وأن صياغة «يتطلب» تشمل أي حقل يقبل إدخالًا، فالحقول الاختيارية تحتاج إلى تسمية أيضًا. وفي الخيارات مثل أزرار الاختيار ومربعات الاختيار، يحتاج كل خيار إلى تسمية خاصة به ليعرف الناس ما الذي يختارونه.
وتقول الصفحة نفسها إن التعليمات قد تذكر أيضًا تنسيق البيانات، مثل أن يُكتب التاريخ بطريقة معينة، وتحذر من الازدحام: فكثرة التعليمات قد تضر بقدر قلتها. كما تفصل ذلك عن الترميز. فقد تكون التسمية ظاهرة ومع ذلك غير مرتبطة بحقلها في الشيفرة، وهو ما تعالجه WCAG تحت معيار مختلف هو 1.3.1. ويوصي دليل W3C للنماذج بالعنصر label لتعريف كل عنصر تحكم، وfieldset مع legend لتجميع العناصر المرتبطة، مثل مجموعة أزرار اختيار.
- لكل حقل تسمية نصية ظاهرة، بما في ذلك الحقول الاختيارية.
- يُميَّز بين الحقول المطلوبة والاختيارية بالكلمات، لا باللون وحده.
- يظهر تلميح للتنسيق حيث يهم التنسيق، مثل كيفية كتابة التاريخ.
- لكل خيار من أزرار الاختيار ومربعات الاختيار تسمية خاصة به.
- الخيارات المرتبطة تقع تحت عنوان مجموعة واحد.
- النقر أو اللمس على التسمية ينقل إلى حقلها، وهذا يشير إلى أن التسمية والحقل مرتبطان.
رسائل الخطأ
ينص المعيار WCAG 3.3.1، تحديد الخطأ، على أنه عندما يُكتشف خطأ إدخال تلقائيًا، يُحدَّد العنصر الخاطئ ويُوصف الخطأ للمستخدم نصيًا. ويضيف شرح W3C أنه في حالة فشل الإرسال لا يكفي عرض النموذج مجددًا دون أي إشارة إلى أن شيئًا ما قد حدث خطأً. ويشمل خطأ الإدخال هنا بندًا مطلوبًا تُرك فارغًا وقيمة خارج التنسيق المتوقع أو القيم المسموح بها.
لا يحدد المعيار مكان الرسائل. يمكن سردها أعلى النموذج أو عرضها بجانب كل حقل، ويمكن إضافة لون أو أيقونة إلى النص لكن لا يُستخدمان بدلًا منه. ويلاحظ W3C أيضًا أن عبارة «البريد الإلكتروني غير صالح» تحقق 3.3.1، بينما الرسالة التي تشرح الإصلاح، كطلب عنوان بالصيغة name@domain.com، تذهب أبعد وتغطي أيضًا المعيار المجاور اقتراح الخطأ.
- بعد فشل الإرسال، تقول رسالة نصية بسيطة إن هناك ما يحتاج إلى إصلاح.
- تسمّي كل رسالة الحقل الذي تشير إليه.
- تقول كل رسالة ما الذي يجب تغييره، لا أن هناك خطأً فقط.
- اللون أو الأيقونة، إن استُخدما، يأتيان مع النص.
- ما كتبه الشخص مسبقًا لا يزال موجودًا بعد الخطأ.
- يظهر تأكيد عند إرسال النموذج بنجاح.
الاستخدام بلوحة المفاتيح
ينص المعيار WCAG 2.1.1، لوحة المفاتيح، على أن جميع وظائف المحتوى ينبغي أن تكون قابلة للتشغيل عبر واجهة لوحة المفاتيح دون اشتراط توقيتات محددة لكل ضغطة مفتاح. ويلاحظ شرح W3C أن هذا مهم لمن لا يستطيعون استخدام الفأرة، وأن واجهات لوحة المفاتيح تشمل أيضًا برامج الإدخال الصوتي ولوحات المفاتيح على الشاشة وبرامج المسح. ويضيف أن أعراف المنصة ممارسة جيدة، فمثلًا يُفعَّل الزر المُركَّز عليه عادةً بالمفتاح Enter أو المسافة.
ويتضمن دليل W3C للنماذج أيضًا ملاحظة عن الحدود الزمنية: ينبغي ألا يكون للنموذج حدّ زمني متى أمكن، وحيث يلزم، كأسباب أمنية، ينبغي أن يتمكن الناس من إيقافه أو تمديده.
نص اختبار مدته عشر دقائق
شغّل هذا على النموذج الفعلي أو نسخة منه، وباستخدام بيانات مُختلَقة فقط. إنها مراجعة عملية لصاحب العمل وليست اختبار امتثال، ونجاحك فيها لا يثبت أن موقعًا ما يستوفي WCAG أو أي معيار آخر. ضع الفأرة جانبًا في الجولة الأولى.
- اضغط Tab من أعلى الصفحة ولاحظ هل تصل إلى كل حقل وكل خيار وزر الإرسال بترتيب معقول.
- تحقق من أنك ترى دائمًا موضع التركيز.
- اختر الخيارات واضغط زر الإرسال دون استخدام الفأرة.
- اترك حقلًا مطلوبًا فارغًا وأرسل. اقرأ الرسالة بصوت عالٍ: هل تسمّي الحقل وتقول ما يجب فعله؟
- اكتب قيمة بتنسيق خاطئ وأرسل. لاحظ هل تساعدك الرسالة على تصحيحها.
- أصلح كل شيء وأرسل مجددًا. تأكد من إخبارك بأن الإرسال نجح.
- دوّن كل نقطة تعثرت عندها، بالترتيب الذي واجهتها به.
مثال افتراضي
تخيّل شركة صغيرة لصيانة الحدائق لديها نموذج لطلب عرض سعر يسأل عن الاسم والبريد والهاتف والعنوان ومساحة الحديقة والرسالة. تعرض الحقول نص تلميح رماديًا يختفي عند بدء الكتابة، ولا تحمل خانة الرسالة تسمية ظاهرة، وغياب البريد يحوّل الحقل إلى الأحمر دون أي كلمات، ولا يمكن الوصول إلى منتقي التاريخ بالمفتاح Tab. يكشف اختبار لوحة المفاتيح هذه كلها في أقل من عشر دقائق. تحذف الشركة سؤال مساحة الحديقة، وتضيف تسميات ظاهرة، وتكتب رسالة تقول أي حقل يحتاج إلى ماذا، وتستبدل المنتقي بحقل تاريخ عادي مع تلميح للتنسيق. هذا المثال مُختلَق وغير مُختبَر.
ما لا تغطيه هذه القائمة
لا تراجع تباين الألوان، ولا مخرجات قارئ الشاشة، ولا سلوك النموذج على الهاتف، ولا الحماية من البريد المزعج، ولا ما يحدث للبيانات المرسلة. والاختبار مع أشخاص حقيقيين يستخدمون التقنيات المساعدة يعطي أكثر من أي قائمة تحقق. احتفظ بقائمة نقاط التعثر وأصلح أبكرها أولًا، فالعائق المبكر يخفي كل ما يليه.