WCAG — ما هو، إرشادات إمكانية الوصول إلى محتوى الويب ومستويات AA

ما هو WCAG؟

WCAG (Web Content Accessibility Guidelines) — مجموعة من التوصيات لضمان إمكانية الوصول إلى محتوى الويب للأشخاص ذوي الإعاقة. تم تطوير المعيار من قبل W3C Web Accessibility Initiative (WAI) منذ عام 1999. يغطي WCAG المكفوفين وضعاف البصر، الصم وضعاف السمع، الأشخاص ذوي القيود الحركية، اضطرابات النطق والإدراك، وكذلك المستخدمين المسنين مع التغيرات المرتبطة بالعمر.

صدرت النسخة الأولى WCAG 1.0 في عام 1999 واحتوت على 14 مبدأً توجيهياً. أصبح WCAG 2.0 (2008) محايداً تقنياً، قابلاً للتطبيق على HTML و PDF والوسائط المتعددة والتطبيقات المحمولة. أضاف WCAG 2.1 (2018) معايير للأجهزة المحمولة والإدخال باللمس. WCAG 2.2 (2023) هو الإصدار الحالي مع معايير جديدة للرسوم المتحركة والتركيز. WCAG ليس قانوناً، لكن العديد من الدول تشير إليه في تشريعاتها.

GOST R 52872-2019 في روسيا، European Accessibility Act في الاتحاد الأوروبي والقسم 508 في الولايات المتحدة — جميعها تتطلب الامتثال لـ WCAG AA. للمواقع الإلكترونية للشركات والحكومة، WCAG AA معيار إلزامي، عدم الامتثال يؤدي إلى دعاوى قضائية. وفقاً لـ UsableNet (2024)، تم رفع أكثر من 12 000 دعوى قضائية بشأن إمكانية الوصول إلى الويب في الولايات المتحدة.

إصدارات WCAG: مقارنة

العواقب القانونية لعدم الامتثال

عدم الامتثال لـ WCAG ينطوي على مخاطر جسيمة. في عام 2025، دخل European Accessibility Act (EAA) حيز التنفيذ، متطلباً WCAG 2.1 AA لجميع المواقع الإلكترونية العامة والتطبيقات المحمولة في الاتحاد الأوروبي. قد تصل الغرامات إلى 5% من حجم الأعمال السنوي للشركة. متوسط مبلغ تسوية الدعاوى في الولايات المتحدة — $25 000–$50 000. يجب إجراء تدقيق إمكانية الوصول في كل مرحلة من مراحل التطوير، وليس فقط قبل الإصدار.

المبادئ الأربعة لـ WCAG: POUR

POUR — اختصار لأربعة مبادئ WCAG: Perceivable (قابلية الإدراك)، Operable (قابلية التشغيل)، Understandable (القابلية للفهم)، Robust (المتانة). كل مبدأ يحتوي على إرشادات، والإرشادات تحتوي على معايير نجاح قابلة للاختبار. WCAG 2.2 يحتوي على 13 إرشاداً و 86 معيار نجاح. كل معيار له مستوى A أو AA أو AAA.

Perceivable — قابلية الإدراك

مبدأ Perceivable يتطلب تقديم المحتوى بشكل يمكن للمستخدم إدراكه. الإرشادات: 1.1 Text Alternatives (بدائل نصية)، 1.2 Time-based Media (ترجمات، نصوص)، 1.3 Adaptable (محتوى دون فقدان عند تغيير التنسيق)، 1.4 Distinguishable (تباين 4.5:1، لون، صوت). المعيار الرئيسي 1.4.3 Contrast Minimum (AA) — الأكثر انتهاكاً: 86% من الصفحات لا تتوافق معه وفقاً لـ WebAIM.

Operable — قابلية التشغيل

مبدأ Operable يتطلب قابلية تشغيل الواجهة. الإرشادات: 2.1 Keyboard Accessible، 2.2 Enough Time، 2.3 Seizures، 2.4 Navigable، 2.5 Input Modalities. المعيار 2.1.1 Keyboard (A) — من أكثر المعايير أهمية: يجب أن تكون جميع الوظائف متاحة عبر لوحة المفاتيح دون استخدام الفأرة. النوافذ المشروطة التي تُغلق فقط بالنقر، القوائم المنسدلة دون تنقل بلوحة المفاتيح — انتهاكات نموذجية.

Understandable — القابلية للفهم

مبدأ Understandable يتطلب قابلية فهم المحتوى والواجهة. الإرشادات: 3.1 Readable، 3.2 Predictable، 3.3 Input Assistance. معيار 3.3.4 Error Prevention مهم بشكل خاص للتطبيقات المالية والطبية: منع العواقب الجسيمة لأخطاء الإدخال. معيار 3.2.6 Consistent Help (جديد في WCAG 2.2) يتطلب أن تكون أزرار المساعدة في نفس الأماكن.

Robust — المتانة

مبدأ Robust يتطلب التوافق مع التقنيات المساعدة. الإرشاد 4.1 Compatible مع المعيار الرئيسي 4.1.2 Name, Role, Value (A): يجب أن يكون لكل مكون واجهة اسم ودور وحالة يمكن تحديدها برمجياً. سمات ARIA (role, aria-label, aria-expanded) — الأداة الرئيسية. بدونها، لا تستطيع قارئات الشاشة تحديد ما إذا كان العنصر زراً أم رابطاً أم تبويباً.

جدول مبادئ WCAG

مستويات الامتثال WCAG: A, AA, AAA

WCAG يحدد ثلاثة مستويات: A (أدنى)، AA (قياسي) و AAA (أقصى). المستوى A — الحد الأدنى الإلزامي: بدونه، المحتوى غير متاح لبعض فئات المستخدمين. AA يزيل العوائق الرئيسية لإمكانية الوصول. AAA — أعلى معيار، لكن لا يمكن تحقيقه لجميع المحتويات (على سبيل المثال، بعض لغات الإشارة أو نصوص الصوت ليست قابلة للتحقيق دائماً).

المستوى A (30 معياراً): بدائل نصية، قابلية تشغيل بلوحة المفاتيح، وقت كافٍ، عدم وجود وميض أعلى من 3 هرتز. المستوى AA (+24 معياراً): نسبة تباين 4.5:1، ترجمات للفيديو، تغيير حجم النص حتى 200%، تركيز لوحة مفاتيح واضح. المستوى AAA (+32 معياراً): نسبة تباين 7:1، لغة إشارة، إيقاف الرسوم المتحركة (2.3.3)، تفريغ صوتي. للمواقع الحكومية، AA كافٍ.

عملية تدقيق WCAG

يتضمن تدقيق إمكانية الوصول WCAG: الاختبار الآلي (axe DevTools, WAVE, Lighthouse — يجد 30–40% من الأخطاء)، الاختبار اليدوي بلوحة المفاتيح وقارئات الشاشة (VoiceOver, TalkBack, NVDA)، تدقيق خبير للمعايير المعقدة واختبار المستخدم مع أشخاص ذوي إعاقة. يجب أن يحتوي تقرير التدقيق على مستوى الامتثال وقائمة عدم الامتثال لكل معيار.

الجديد في WCAG 2.2

WCAG 2.2 أضاف 9 معايير جديدة. الرئيسية: 2.4.11 Focus Appearance (AA) — مؤشر تركيز >= 2px بتباين 3:1، 2.5.8 Target Size Minimum (AA) — هدف لمس لا يقل عن 24x24 بكسل، 3.3.7 Accessible Authentication (AA) — مصادقة بدون CAPTCHA. معيار 2.3.3 Animation from Interactions (AAA) — رسوم متحركة قابلة للإيقاف أو لا تزيد عن 5 ثوانٍ.

Focus Appearance — أهم تغيير. سابقاً، outline: none دون بديل كان انتهاكاً، لكن لم تكن هناك متطلبات واضحة. WCAG 2.2 حدد: سمك >= 2px، تباين 3:1 مع الخلفية، مساحة المؤشر لا تقل عن مساحة العنصر. للأزرار المخصصة ذات border-radius، استخدم box-shadow بدلاً من outline.

Focus Appearance في CSS

/* WCAG 2.2 Focus Appearance (2.4.11 AA) */
:focus-visible {
    outline: 3px solid #0066CC;
    outline-offset: 2px;
}

.button:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 3px #FFFFFF,
        0 0 0 6px #0066CC;
}

@media (prefers-color-scheme: dark) {
    :focus-visible { outline-color: #66B2FF; }
}

@media (prefers-contrast: more) {
    :focus-visible { outline: 4px solid #000; outline-offset: 3px; }
}

تصميم :focus-visible يضمن الامتثال لمعيار Focus Appearance. بديل عبر box-shadow مناسب للعناصر ذات border-radius. السمة الداكنة و High Contrast يكيّفان ألوان التركيز.

Accessible Authentication

معيار 3.3.7 Accessible Authentication (AA) — من أكثر الابتكارات إثارة للجدل. CAPTCHA مع التعرف على الأشياء، الألغاز، سحب المنزلقات — الآن انتهاك إذا لم يكن هناك بديل. الطرق المقبولة: OTP عبر البريد الإلكتروني/SMS، القياسات الحيوية (Face ID, Touch ID)، رموز QR، Magic link. هذا يبسط الحياة ليس فقط للأشخاص ذوي الإعاقات الإدراكية، ولكن لجميع المستخدمين.

WCAG للتطبيقات المحمولة

WCAG قابل للتطبيق على تطبيقات iOS و Android الأصلية. المبادئ الأربعة POUR تغطي الواجهات المحمولة بالكامل. معايير محددة: 2.5.1 Pointer Gestures (إيماءات بدون دقة عالية)، 2.5.2 Pointer Cancellation (إلغاء اللمس العرضي)، 2.5.3 Label in Name (نص الزر يطابق تسمية إمكانية الوصول). iOS يستخدم UIKit/UIAccessibility، Android يستخدم AccessibilityService و ContentDescription.

الأكثر انتهاكاً في التطبيقات المحمولة: 1.1.1 Non-text Content — أيقونات بدون contentDescription، 2.4.3 Focus Order — ترتيب تنقل غير صحيح، 2.5.8 Target Size — أزرار أصغر من 24x24dp، 1.4.3 Contrast — نص على صور خلفية. iOS يوفر Accessibility Inspector في Xcode، Android يوفر Accessibility Scanner للتدقيق الآلي.

كود SwiftUI المتوافق مع WCAG

import SwiftUI

struct AccessibleButton: View {
    let action: () -> Void
    let title: String
    let icon: String

    var body: some View {
        Button(action: action) {
            HStack {
                Image(systemName: icon)
                Text(title)
            }
            .padding(16)
            .background(Color.blue)
            .foregroundColor(.white)
            .cornerRadius(12)
            .frame(minWidth: 48, minHeight: 48)
        }
        .accessibilityLabel(title)
        .accessibilityHint("انقر للإجراء")
        .accessibilityAddTraits(.isButton)
    }
}

struct AccessibleForm: View {
    @State private var email = ""

    var body: some View {
        VStack(spacing: 16) {
            VStack(alignment: .leading) {
                Text("البريد الإلكتروني")
                TextField("أدخل البريد الإلكتروني", text: $email)
                    .textContentType(.emailAddress)
                    .keyboardType(.emailAddress)
                    .autocapitalization(.none)
                    .accessibilityLabel("حقل إدخال البريد الإلكتروني")
                    .accessibilityHint("أدخل عنوان البريد الإلكتروني")
            }
            AccessibleButton(
                action: { },
                title: "إرسال",
                icon: "paperplane.fill"
            )
        }
        .padding()
    }
}

مكونات SwiftUI مع accessibilityLabel و accessibilityHint و minWidth/minHeight >= 48pt تضمن الامتثال لـ WCAG 2.5.8 (Target Size) و 2.5.3 (Label in Name). استخدم Xcode Accessibility Inspector للتحقق من تركيز VoiceOver وترتيب التنقل وأحجام أهداف اللمس. تنطبق متطلبات مماثلة على Jetpack Compose عبر Modifier.semantics.