WCAG — یہ کیا ہے، Web Content Accessibility Guidelines اور AA سطحیں

WCAG کیا ہے؟

WCAG (Web Content Accessibility Guidelines) معذور افراد کے لیے ویب مواد تک رسائی کو یقینی بنانے کے لیے سفارشات کا ایک مجموعہ ہے۔ یہ معیار 1999 سے W3C Web Accessibility Initiative (WAI) کے ذریعے تیار کیا جا رہا ہے۔ 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 EU میں اور Section 508 امریکہ میں — سبھی WCAG AA کی تعمیل کا تقاضا کرتے ہیں۔ کارپوریٹ اور سرکاری ویب سائٹس کے لیے، WCAG AA ایک لازمی معیار ہے، جس کی خلاف ورزی پر مقدمے چلتے ہیں۔ UsableNet (2024) کے مطابق، امریکہ میں 12,000 سے زیادہ ویب رسائی کے مقدمے دائر کیے گئے۔

WCAG ورژن: موازنہ

تعمیل نہ کرنے کے قانونی نتائج

WCAG کی تعمیل نہ کرنا سنگین خطرات رکھتا ہے۔ 2025 میں، European Accessibility Act (EAA) نافذ ہوا، جس میں EU میں تمام عوامی ویب سائٹس اور موبائل ایپلیکیشنز کے لیے 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) سب سے زیادہ خلاف ورزی کیا جاتا ہے: WebAIM کے مطابق 86% صفحات اس پر پورا نہیں اترتے۔

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) کے ساتھ: ہر UI جزو کا پروگرام کے ذریعے قابل تعین نام، کردار اور حالت ہونی چاہیے۔ ARIA اوصاف (role, aria-label, aria-expanded) اہم ذریعہ ہیں۔ ان کے بغیر، اسکرین ریڈرز اس بات کا تعین نہیں کر سکتے کہ کوئی عنصر بٹن ہے، لنک ہے یا ٹیب۔

WCAG اصولوں کا جدول

WCAG موافقت کی سطحیں: A, AA, AAA

WCAG تین سطحیں متعین کرتا ہے: A (کم از کم)، AA (معیاری) اور AAA (زیادہ سے زیادہ)۔ سطح A لازمی کم از کم ہے: اس کے بغیر، مواد صارفین کے کچھ زمروں کے لیے ناقابل رسائی ہے۔ AA اہم رسائی کی رکاوٹوں کو ہٹاتا ہے۔ AAA اعلیٰ ترین معیار ہے، لیکن تمام مواد کے لیے حاصل نہیں کیا جا سکتا (مثال کے طور پر، کچھ اشاروں کی زبانیں یا آڈیو نقول ہمیشہ قابل عمل نہیں ہوتیں)۔

سطح A (30 معیار): متبادل متن، کی بورڈ کے قابل استعمال، کافی وقت، 3 Hz سے اوپر کوئی جھلک نہیں۔ سطح 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) — 3:1 کنٹراسٹ کے ساتھ >= 2px فوکس اشارہ، 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 والے حسب ضرورت بٹن کے لیے، outline کے بجائے box-shadow استعمال کریں۔

CSS میں Focus Appearance

/* 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، پہیلیاں، سلائیڈر گھسیٹنا — اب خلاف ورزی ہے اگر کوئی متبادل نہ ہو۔ قابل قبول طریقے: ای میل/SMS کے ذریعے OTP، بائیو میٹرکس (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 Xcode میں Accessibility Inspector فراہم کرتا ہے، Android خودکار آڈٹ کے لیے Accessibility Scanner فراہم کرتا ہے۔

WCAG کے مطابق SwiftUI کوڈ

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()
    }
}

accessibilityLabel، accessibilityHint اور minWidth/minHeight >= 48pt والے SwiftUI اجزاء WCAG 2.5.8 (Target Size) اور 2.5.3 (Label in Name) کی تعمیل کو یقینی بناتے ہیں۔ VoiceOver فوکس، نیویگیشن ترتیب اور ٹچ ہدف کے سائز چیک کرنے کے لیے Xcode Accessibility Inspector استعمال کریں۔ اسی طرح کے تقاضے Modifier.semantics کے ذریعے Jetpack Compose پر لاگو ہوتے ہیں۔