دليل دمج reCAPTCHA القابلة للنفاذ (WCAG 2.2)

تُعد CAPTCHAs إشكالية من ناحية قابلية النفاذ لأنها تنشئ عوائق بين المستخدمين. ومع استخدام الإصدارات الحديثة مثل reCAPTCHA v3 وتنفيذ ضوابط مناسبة، يمكن الامتثال لمعايير WCAG 2.2.

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

بما أن reCAPTCHA غالباً ما يكون iframe تابعاً لطرف ثالث، فإن التحكم في التباين الداخلي محدود. تقع مسؤوليتك في كيفية دمجه داخل الصفحة وكيفية عرض الأخطاء.

التخطيط والحجب البصري (WCAG 1.4.10)

• المشكلة: يعرض reCAPTCHA v3 علامة "protected by reCAPTCHA" غالباً في الزاوية السفلية اليمنى، مما قد يحجب عناصر تفاعلية.
• الحل: لا تقم بإخفاء الشارة (مخالفة لشروط Google)، بل أعد تموضعها باستخدام CSS أو اعرض النص القانوني داخل الصفحة إذا سمحت Google بذلك.

تباين ألوان الأخطاء (WCAG 1.4.3)

• يجب أن يحقق نص رسالة الخطأ خارج iframe نسبة تباين 4.5:1 مع الخلفية.
• مثال: استخدم لوناً أحمر داكناً (D32F2F#) بدلاً من الأحمر الفاتح على خلفية بيضاء.

مؤشر التركيز Focus (WCAG 2.4.13)

• يجب أن يحتوي iframe الخاص بـ reCAPTCHA على مؤشر تركيز مرئي عند التنقل بلوحة المفاتيح.
• قم بتغليف العنصر داخل container وتطبيق أنماط التركيز عليه لضمان ظهور المؤشر.

2. قابلية النفاذ عبر لوحة المفاتيح (Operable)

يجب أن يتمكن المستخدم من الوصول إلى CAPTCHA وتنفيذ التحقق والتعامل مع التحدي الصوتي دون الوقوع في مصيدة لوحة المفاتيح.

نمط التفاعل القياسي (v2 Checkbox)

• Tab / Shift + Tab: نقل التركيز إلى مربع "I'm not a robot".
• Enter / Space: تحديد المربع وفتح تحدي الصور عند الحاجة.
• Tab (inside modal): التنقل بين "Reload" و"Audio Challenge" و"Verify".
• Escape: إغلاق نافذة التحدي.

بديل التحدي الصوتي (مهم لـ 3.3.8)

• المستخدمون المكفوفون أو ضعاف البصر لا يمكنهم حل تحديات الصور.
• يجب أن يكون زر "Audio" قابلاً للوصول عبر لوحة المفاتيح.
• يسمح WCAG 3.3.8 بهذا التحدي لأنه بديل لاختبار التعرف البصري.

عدم وجود Keyboard Trap (WCAG 2.1.2)

• يجب أن يتمكن المستخدم من الخروج من iframe باستخدام Tab دون عوائق.

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

تسمية Iframe (WCAG 4.1.2)

• يجب أن يحتوي iframe على خاصية title ذات معنى مثل title="reCAPTCHA".
• إذا لم تكن موجودة يمكن إضافة aria-label="Security check" إلى عنصر التغليف.

إدارة التركيز عند الأخطاء (WCAG 3.3.1)

• عند إرسال النموذج دون reCAPTCHA يجب نقل التركيز إلى رسالة الخطأ أو عنصر CAPTCHA.

Live Regions للحالة

• يجب إعلام قارئات الشاشة عند انتهاء صلاحية التحقق.
• استخدم aria-live="polite" داخل حاوية الأخطاء.

استخدام الكود (ادارة التركيز)

const form = document.getElementById('myForm');
const captchaErrorContainer = document.getElementById('captchaError');

form.addEventListener('submit', (e) => {
    const response = grecaptcha.getResponse();

    if (response.length === 0) {
        e.preventDefault();

        captchaErrorContainer.textContent =
        "Please complete the security check below.";
        captchaErrorContainer.hidden = false;

        captchaErrorContainer.focus();
    }
});