نماذج يسهل الوصول إليها
التسميات أولًا
يحتاج كل حقل إلى تسمية مرئية مرتبطة به برمجيًا. في HTML يعني ذلك عنصر <code>;label<;/code>; تطابق خاصية <code>;for<;/code>; فيه قيمة <code>;id<;/code>; للحقل. عندها تركّز النقرة على التسمية الحقل وتعلنها قارئات الشاشة.
لا تجعل النص الإرشادي (placeholder) هو التسمية الوحيدة. فهو يختفي عند الكتابة وغالبًا ضعيف التباين ويُظن أنه قيمة مدخلة.
التلميحات والحقول المطلوبة والتعبئة التلقائية
- التلميحات مثل مثال الصيغة («DD/MM/YYYY») تُوضع في نص مرئي تحت التسمية وترتبط بالحقل عبر <code>;aria-describedby<;/code>;.
- الحقول المطلوبة تُعلَّم بالنص لا باللون أو بالنجمة وحدها، مع شرح العلامة أعلى النموذج. وتنقل الخاصية <code>;required<;/code>; الحالة إلى التقنيات المساعدة.
- الإكمال التلقائي: تطلب WCAG 1.3.5 (تحديد غرض الإدخال، AA) استخدام قيم <code>;autocomplete<;/code>; الصحيحة في حقول بيانات المستخدم مثل <code>;name<;/code>; و<code>;email<;/code>; و<code>;tel<;/code>;.
تجميع العناصر المترابطة
أزرار الاختيار ومجموعات خانات التحديد تجيب عن سؤال مشترك. ضعها داخل <code>;fieldset<;/code>; وسمِّ السؤال في <code>;legend<;/code>;. وإلا سمع مستخدم قارئ الشاشة «نعم» أو «شهري» دون أن يعرف السؤال.
أخطاء تساعد
تشترط WCAG 3.3.1 (تحديد الخطأ، A) أن يُحدَّد الخطأ ويوصف بالنص. وتطلب WCAG 3.3.3 (اقتراح التصحيح، AA) تقديم اقتراح للإصلاح عند معرفته.
- صف المشكلة والحل: «أدخل تاريخًا مثل 25/12/2026» لا «إدخال غير صالح».
- اعرض الرسالة بجانب الحقل وأضف أيقونة أو نصًا، لا لونًا فقط.
- بعد فشل الإرسال اعرض ملخصًا للأخطاء في الأعلى يسرد كل مشكلة برابط إلى حقلها.
- انقل تركيز لوحة المفاتيح إلى الملخص ليسمعه مستخدم قارئ الشاشة فورًا.
يؤثر التخطيط في إمكانية الوصول بقدر ما يؤثر الكود. النماذج البسيطة المتوقعة أسهل للجميع، ومنهم مستخدمو مكبّرات الشاشة والتحكم الصوتي.
- ضع التسميات فوق الحقول. فهي تبقى ظاهرة عند التكبير الشديد وعلى الشاشات الضيقة.
- استخدم عمودًا واحدًا لمعظم النماذج ليكون ترتيب القراءة واضحًا.
- طابق نوع الإدخال مع البيانات، مثل <code>;type="email"</code>; أو <code>;type="tel"</code>;، لتتكيف لوحات مفاتيح الهاتف.
- اطلب ما يلزم فقط. كل حقل إضافي فرصة أخرى للخطأ.
لا تمسح النموذج بعد الخطأ. أبقِ ما كتبه المستخدم ليصلح الحقل المعيب فقط.
المصادر
- W3C WAI. Forms Tutorial. https://www.w3.org/WAI/tutorials/forms/
- W3C. Understanding SC 1.3.5 Identify Input Purpose. https://www.w3.org/WAI/WCAG22/Understanding/identify-input-purpose.html
صيغ هذا الدليل بمساعدة الذكاء الاصطناعي اعتمادًا على معايير ومراجع عامة. وللنص الدقيق لأي معيار، ارجع إلى المصادر المذكورة أعلاه.