1. التصميم والأدراك البصري (Perceivable)

قبل كتابة أي كود، يجب أن يكون التصميم البصري للنموذج قابلًا للوصول.

تباين الألوان (WCAG 1.4.3, 1.4.11)

• نسبة التباين بين النص والخلفية ≥ 4.5:1 (للنص العادي) أو ≥ 3:1 (للنص الكبير)
• يجب أن تحقق مؤشرات focus لحقل الإدخال أو عناصر التحكم (مثل outline أو underline أو تغيير الخلفية) نسبة تباين لا تقل عن 3:1
• لا تعتمد على اللون فقط للدلالة على الخطأ (مثل اللون الأحمر)، بل قدم رسالة نصية باللون الأحمر أيضًا

أهداف اللمس (WCAG 2.5.5)

• يجب أن تكون العناصر التفاعلية (الأزرار، الحقول، عناصر التحكم) بمساحة لمس لا تقل عن 24px × 24px في نسخة الجوال

التسميات والمجموعات (WCAG 3.3.2, 1.3.1)

• التعليمات او التسميات: يجب أن تحتوي جميع الحقول على تسميات واضحة ومرئية دائمًا
• العلاقات بين العناصر: عنصر <fieldset> يجمع عناصر التحكم المرتبطة (radio/checkbox) برمجيًا ليساعد قارئ الشاشة في قراءة السؤال

2. قابلية الاستخدام عبر لوحة المفاتيح (Operable)

يجب أن تكون جميع عناصر النموذج قابلة للتشغيل باستخدام لوحة المفاتيح فقط. يجب أن يكون المستخدم قادرًا على تنفيذ كل إجراء يمكن لمستخدم الفأرة القيام به.

التنقل بين النماذج (2.4.3, 2.4.7)

• ترتيب التركيز (Focus Order): يوفر تنقلًا منطقيًا لجميع عناصر النموذج ورسائل الخطأ بالترتيب الصحيح.
• ظهور التركيز (Focus Visible): مؤشر التركيز عبر لوحة المفاتيح يكون مرئيًا دائمًا.

3. قارئات الشاشة والتقنيات المساعدة (Understandable & Robust)

تعد خصائص HTML وARIA الصحيحة ضرورية لمستخدمي قارئ الشاشة لفهم بنية النموذج وحالته.

أدوار وخصائص وحالات ARIA

• aria-required="true": تأكد من أن الحقول المطلوبة تحمل الخاصية required لتقنيات المساعدة. كما يتم عرض علامة النجمة * بصريًا.
• role="alert": هذه الخاصية تجعل العنصر منطقة حية (live region)، حيث تطلب من قارئ الشاشة الإعلان الفوري عن محتوى هذا
  عند ظهوره، ليكون المستخدم على علم بوجود أخطاء فورًا.
• aria-invalid="true": للإشارة إلى أن القيمة المدخلة في الحقل غير مقبولة أو غير صحيحة.
• aria-describedby: تنشئ ارتباطًا برمجيًا بين الحقل ورسالة الخطأ الخاصة به. عند تركيز قارئ الشاشة على الحقل غير الصحيح، سيعلن عن التسمية ثم رسالة الخطأ المرتبطة عبر aria-describedby
• aria-hidden="true": لإخفاء المحتوى عن قارئ الشاشة والتقنيات المساعدة

رسائل الخطأ الواضحة والمحددة (3.3.1, 3.3.3)

• تحديد الخطأ: يتم تحديد الخطأ بوضوح في نص الرسالة
• اقتراح التصحيح: تقدم الرسالة اقتراحًا لتصحيح الخطأ