تكرار السؤال: …
الإجابة المختصرة
ربط كل حقل إدخال بـ <label> صريح عبر htmlFor و id، وتحديد سمات aria-invalid و aria-describedby لرسائل الخطأ، ودعم التنقل الكامل بلوحة المفاتيح والتركيز التلقائي.
الشرح
لا تستطيع قارئات الشاشة التعرف على وظيفة الحقل إذا اعتمد المطور على placeholder فقط دون label. عند حدوث خطأ، يجب إضافة aria-invalid="true" للحقل وربطه بمعرف رسالة الخطأ عبر aria-describedby حتى يقرأه البرنامج الناطق للمكفوفين فور انتقال التركيز إليه، مع نقل الـ Focus تلقائياً لأول حقل خاطئ عند محاولة التقديم.
مثال بالكود
<div>
<label htmlFor="user-email">البريد الإلكتروني:</label>
<input
id="user-email"
type="email"
aria-invalid={Boolean(errors.email)}
aria-describedby={errors.email ? "email-error" : undefined}
/>
{errors.email && <p id="email-error" role="alert">{errors.email.message}</p>}
</div>أخطاء شائعة
- الاعتماد على لون الحقل الأحمر فقط كدلالة وحيدة على وجود خطأ دون إرفاق نص توضيحي أو سمات إتاحة.