شرح صفوف ومحتوى الفقرة
الاعتماد على اللون الأحمر وحده لتمييز الحقل الخاطئ لا يظهر لمستخدمي قارئات الشاشة المكفوفين ولا لمن يعانون ضعف تمييز الألوان. يتطلب التحقق المتاح قياسياً ربط سمتين من معيار WAI-ARIA بمعرّف مولد عبر useId():
- سمة
aria-invalidلإبلاغ التقنيات المساعدة بأن الحقل الحالي يحوي خطأً. - سمة
aria-describedbyمربوطة بمعرّف فقرة رسالة الخطأ حتى تُقرأ إرشادات التصحيح صوتياً تلقائياً.
HTML
<input
id={fieldId}
aria-invalid={showErr}
aria-describedby={showErr ? errId : undefined}
value={slug}
onChange={(e) => setSlug(e.target.value)}
/>
{showErr && <p id={errId} role="alert">{errMsg}</p>}