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 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-এ প্রযোজ্য।