دليل دمج 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 وتنفيذ التحقق والتعامل مع التحدي الصوتي دون الوقوع في Keyboard Trap.

نمط التفاعل القياسي (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();
    }
});