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 यूरोपीय संघ में और Section 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) — सबसे अधिक उल्लंघन: 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 हर्ट्ज से ऊपर कोई झिलमिलाहट नहीं। स्तर 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 पर लागू होती हैं।