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 است. ممیزی accessibility باید در هر مرحله از توسعه انجام شود، نه فقط قبل از انتشار.

چهار اصل 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): هر کامپوننت UI باید دارای نام، نقش و وضعیت قابل تعیین برنامه‌ای باشد. ویژگی‌های ARIA (role، aria-label، aria-expanded) — ابزار اصلی. بدون آنها، صفحه‌خوان‌ها نمی‌توانند تعیین کنند که یک عنصر دکمه، لینک یا تب است.

جدول اصول WCAG

سطوح انطباق WCAG: A، AA، AAA

WCAG سه سطح را تعریف می‌کند: A (حداقلی)، AA (استاندارد) و AAA (حداکثری). سطح A — حداقل اجباری: بدون آن محتوا برای برخی دسته‌های کاربران غیرقابل دسترس است. AA موانع اصلی دسترس‌پذیری را برطرف می‌کند. AAA — بالاترین استاندارد، اما برای همه محتوا قابل دستیابی نیست (مثلاً برخی زبان‌های اشاره یا رونوشت‌های صوتی همیشه قابل اجرا نیستند).

سطح A (30 معیار): text alternatives، قابلیت کنترل با صفحه‌کلید، زمان کافی، عدم سوسو زدن بالای 3 هرتز. سطح AA (+24 معیار): contrast ratio 4.5:1، زیرنویس برای ویدیو، resize متن تا 200%، فوکوس واضح صفحه‌کلید. سطح AAA (+32 معیار): contrast ratio 7:1، زبان اشاره، خاموش کردن انیمیشن (2.3.3)، رونوشت صوتی. برای وب‌سایت‌های دولتی AA کافی است.

فرآیند ممیزی WCAG

ممیزی accessibility بر اساس 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 به جای outline از box-shadow استفاده کنید.

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 (متن دکمه با برچسب accessibility مطابقت دارد). برای 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، ترتیب ناوبری و اندازه‌های touch targets استفاده کنید. الزامات مشابه برای Jetpack Compose از طریق Modifier.semantics اعمال می‌شود.