Claude كتب مكوّن DatePicker بلغة React، لكن تحقيق الامتثال لمعايير WCAG استغرق 3 أيام إضافية

طلب فريق من المطوّرين من Claude إنشاء مكوّن DatePicker مخصص بلغة React لنموذج حجز موعد طبي، مع دعم كامل للتنقل عبر لوحة المفاتيح وقارئات الشاشة. أنجز الذكاء الاصطناعي النسخة الأولى بسرعة. ثم بدأت ثلاثة أيام من التحسينات.

ما الذي أجاده Claude

ولّد Claude أساسًا عمليًا للمكوّن: بنية JSX، وسمات ARIA الأساسية (`role="dialog"` و`aria-label` و`aria-live`)، ومعالجات المفاتيح للتنقل بالأسهم، ومنطق شبكة التقويم. وكنقطة انطلاق، كان الناتج جيدًا: فقد جرى تجميع الكود بنجاح، وبدا صحيحًا من الناحية البصرية، ولم تُفسد المراجعة اليدوية شيئًا.

وكان الذكاء الاصطناعي مفيدًا بوجه خاص في الكود القالبي: توليد 42 خلية للشبكة، وحساب إزاحة اليوم الأول من الشهر، وتنسيق التواريخ لـ`aria-label`. هذا عمل مُرهق عند إنجازه يدويًا، وقد تعامل Claude معه بدقة.

لم تتضح المشكلة إلا بعد تشغيل تقنيات مساعدة حقيقية.

أين حدث الخلل

بدأ الاختبار الحقيقي عند تشغيل NVDA على Windows وVoiceOver على macOS. وظهرت عدة مشكلات:

• مصيدة التركيز لم تعمل — عند الضغط على Tab داخل نافذة الحوار، كان التركيز ينتقل إلى المستند الرئيسي
• نُطقت التواريخ بشكل خاطئ — كان قارئ الشاشة ينطق «1» بدلًا من «الاثنين، 1 يونيو 2026»
• تبديل الشهر جرى بصمت — لم تتحدّث منطقة `aria-live` عند تغيير الشهر
• Escape كان يغلق لكنه لا يعيد التركيز — بعد إغلاق التقويم كان التركيز يضيع بدل أن يعود إلى زر التفعيل
• التباين العالي في Windows — لم يكن التاريخ المحدد يختلف بصريًا عن بقية التواريخ، إذ اعتمد المكوّن على لون CSS دون سمات للحالة

بدا كل بند من هذه البنود في الكود المولّد على أنه «المعالج موجود»، لكن السلوك مع قارئ الشاشة الحقيقي اختلف عن المتوقع.

كيف أُصلحت المشكلات

كان الحل في WAI-ARIA APG، وهو الدليل الرسمي من W3C الذي يتضمن نمطًا محددًا لحوار DatePicker. لا يكتفي بعبارة «أضف `aria-modal`»، بل يحدد تسلسلًا دقيقًا: أي عنصر يتلقى التركيز عند الفتح، وكيف تُحفظ مصيدة التركيز، وإلى أين يُعاد التركيز عند الإغلاق، وأي قيم `aria-label` مطلوبة على أزرار التنقل بين الأشهر.

«قراءة الكود المولّد لا تعني التحقق من الإتاحة. وحده قارئ الشاشة

الحقيقي يُظهر الحقيقة.»

أُعيدت كتابة مصيدة التركيز عبر `querySelectorAll` مع اعتراض يدوي للمفتاحين Tab وShift+Tab. وحصلت كل خلية يوم على `aria-label` كامل من نوع «الأربعاء، 3 يونيو 2026» إضافةً إلى `aria-pressed="true"` للحالة المحددة. ولوضع التباين العالي أُضيف `aria-selected` وإطار عبر `outline`، لا لون الخلفية وحده.

وكان `aria-live` أدق نقطة: يجب أن تكون المنطقة موجودة في DOM قبل كتابة النص فيها، وإلا تجاهلها قارئ الشاشة. أما Claude فقد أدرج المنطقة ديناميكيًا، ولم تتضح هذه التفصيلة إلا في الاختبار.

ماذا يعني ذلك

يُسرّع Claude كتابة الكود المتاح، لكنه لا يغني عن الاختبار بقارئات الشاشة. والخبر الجيد: بعد فهم WAI-ARIA APG مرة واحدة وتوثيق الحلول، تصبح كتابة المكوّن المتاح التالي أسرع بكثير. يتولى الذكاء الاصطناعي العمل القالبي، لكن لا يجوز تخطي الفحص النهائي باستخدام NVDA وVoiceOver.